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编程起步(第六课)
Feb 27 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
树结构之JavaScript
2017/01/24 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python获得一个月有多少天的方法
2015/06/04 Python
python自定义异常实例详解
2017/07/11 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
大学生求职简历的自我评价范文
2013/10/12 职场文书
升职自荐书范文
2013/11/28 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
座谈会主持词
2014/03/20 职场文书
学生个人自我鉴定
2014/03/26 职场文书
技术比武方案
2014/05/19 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
开学第一周值周总结
2015/07/16 职场文书