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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
js loading加载效果实现代码
Nov 24 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
简单实现jquery焦点图
Dec 12 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 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弹出对话框技巧详细解读
2015/09/26 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
用javascript作一个通用向导说明
2011/08/30 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
Python简单日志处理类分享
2015/02/14 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python生成lmdb格式的文件实例
2018/11/08 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
电气自动化自荐信
2013/10/10 职场文书
建筑工程自我鉴定
2013/10/18 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
CAD实训总结范文
2015/08/03 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA