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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
javascript Canvas动态粒子连线
Jan 01 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
德劲1107的电路分析与打磨
2021/03/02 无线电
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
php中的三元运算符使用说明
2011/07/03 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP输出日历表代码实例
2015/03/27 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python使用matplotlib简单绘图示例
2018/02/01 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
打架检讨书300字
2014/02/02 职场文书
生日祝酒词大全
2015/08/10 职场文书
调研报告的主要写法
2019/04/18 职场文书
学校就业保障协议书
2019/06/24 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
Python基础详解之描述符
2021/04/28 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python