JS中的事件委托实例浅析


Posted in Javascript onMarch 22, 2018

本文实例讲述了JS中的事件委托。分享给大家供大家参考,具体如下:

事件委托(也叫事件代理),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子:

<ul>
    <li>点击</li>
</ul>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li')[0];
    ul.addEventListener('click', function(){
      alert('我是ul,我被点击了');
    }, false);
    li.addEventListener('click', function(){
      alert('我是li,我被点击了');
    }, false);
</script>

在这段代码中,当我们点击li的时候出发了li的click事件,但是在这时,ul的click事件也被触发了,这就是事件的冒泡。搞明白这个之后,我们就可以来说事件委托了,既然事件能从子元素(li)冒泡的父元素(ul)身上,那么我们就可以给ul自己加一个click事件,把所有li的事件都委托给了我们的父级(ul)身上,可能到这里有些朋友还是不明白这个事件委托到底有什么用,我们在举一个事件委托的实例来说明一下:

<ul>
    <li>点击1</li>
    <li>点击2</li>
    <li>点击3</li>
    <li>点击4</li>
    <li>点击5</li>
</ul>
<script>
    //使用事件委托的代码
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click', function(e){
      alert(e.target.innerHTML);
    }, false);
    //不使用事件委托,循环给li添加click事件
    var li=document.getElementsByTagName('li')
    for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
        alert(this.innerHTML);
      }
    }
</script>

我们以上代码把事件委托给了ul,只给ul增加点击事件,在浏览器中运行点击对应的li会弹出li对应的innerHTML,这个function(e){};中的e这个参数实际上就是当前我们点击li时,系统传给我们的一些事件信息,e.target实际上指的就是当前我们点击的这个li,在这里我们每次弹出的都是当前点击对象的innerHTML,这就是一个简单的事件委托的案例。

而事件委托对于我们优化代码意义是非常大的,我们都知道,频繁的dom操作是非常耗费性能的,现在ul里边是5个li,我们假如不用事件委托实现上面代码所作的事情,就需要用for循环,给每个li都写一个click事件,这样一来dom操作就比较多了,如果是10个li呢,100个甚至更多呢,单不说dom操作影响的性能,li过多for循环自身就会占用大量的事件。如果利用事件委托,既避免了for循环耗费的性能,又省去了繁多的dom操作耗费的性能。

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
jquery的 filter()方法使用教程
Mar 22 #jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 #Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 #Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 #Javascript
基于vue-video-player自定义播放器的方法
Mar 21 #Javascript
基于iScroll实现内容滚动效果
Mar 21 #Javascript
JS中的回调函数实例浅析
Mar 21 #Javascript
You might like
一段php加密解密的代码
2007/07/16 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
php命令行模式代码实例详解
2021/02/26 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
django的ORM模型的实现原理
2019/03/04 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
个人合伙协议书范本
2014/10/14 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
毕业论文致谢信
2015/05/14 职场文书
地震捐款简报
2015/07/21 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js