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 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
JS实现页面数据懒加载
Feb 13 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
python网络编程实例简析
2014/09/26 Python
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
汽车运用工程毕业生自荐信
2013/10/29 职场文书
自荐信包含哪些内容
2013/10/30 职场文书
求职推荐信范文
2013/12/01 职场文书
学生宿舍管理制度
2014/01/30 职场文书
小学生检讨书大全
2014/02/06 职场文书
行政办公室岗位职责
2014/03/18 职场文书
学校安全责任书
2014/04/14 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
先进人物事迹材料
2014/12/29 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技