javascript 中的事件委托详解


Posted in Javascript onOctober 25, 2016

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看.

首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡,

通常,在js中监听事件的方法共有三种,分别是:

  ele.addEventListener(type,listener,[useCapture]);//IE6~8不支持

ele.attachEvent('on'+type,listener);//IE6~10支持,IE11不支持

ele.onClick=function(){};//所有浏览器都支持

w3c规范中定义了三个事件阶段,依次是捕获阶段,目标阶段,冒泡阶段,而w3c指定的dom2级规定中,使用的是addEventListener来监听事件的.所以我们就以addEventListener来讲解,首先事假冒泡就像你从往水中扔一块石子,水中的气泡从下边往上冒一样,意思为触发事件后从子元素王父元素方向触发,而捕获机制则正好相反,捕获机制是从父元素往子元素方向进行事件触发,而addEventListener函数中的第三位参数正是来决定是使用捕获机制还是冒泡机制的,当useCapture为true是为捕获机制,当useCapture为false时是冒泡机制,我们看一下例子:

复制代码

<div class="parent">
  <div class="child">

  </div>
</div>
<script>
  var parent = document.getElementsByClassName('parent')[0];
  var child = document.getElementsByClassName('child')[0];

  parent.addEventListener('click',function(){
    console.log("这里是父元素");
  },false);
  child.addEventListener('click',function(){
    console.log("这里是子元素");
  },false);
</script>

javascript 中的事件委托详解

当我们点击子元素是显示上图,当我们将false改为true后就会发现执行顺序会反过来,这就是事件冒泡和捕获的区别,他们两个刚好相反,

javascript 中的事件委托详解

那么使用这种绑定机制我们的弊端在于要去给每一个对象绑定事件会是一个特别麻烦的事情,当我们要删除一个事件或者要改变一个事件的时候会特别的繁琐,更重要的是,我们增加了JavaScript和dom节点之间的关联,而且一点出现循环引用,很有可能造成内存泄露,这些都是它的弊端,

 

那么解决这种弊端的一种方法就是事件代理(event delegation),这个方法可以让你避免去给每一个节点一一的添加事件,它的做法是将这些监听事件去绑定到这些节点的父元素上,在父元素上的这个监听函数自动去判断是哪一个子元素触发的事件,从而可以对触发事件的子元素进行操作,这里我们给出的例子是davidwalsh所给出的一个例子:

 

现在我们有一个父元素ul和几个li子元素,

<ul id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

现在我们要实现的是,当我们点击每一个li节点的时候,都会输出li节点中的内容,按照上边的写法,你可以选中这些li,让后给他们加上这些方法,然后等到不需要了再将他们移除,如果有100个li,1000个li呢,这将会成为你的噩梦,较好的解决方法就是给父元素添加一个监听事件,之后的问题便是怎么去判断出来时哪一个li被点击了? 我们可以在监听事件中去判断当前event的target来判断是否是我们要找的节点,这里我们有一个简单的例子:

// 找到父元素,绑定一个监听事件
document.getElementById("parent-list").addEventListener("click", function(e) {
  // e.target是点击的元素
  // 如果它是li元素
  if(e.target && e.target.nodeName == "LI") {
    //
    console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
  }
});

当ul中发生点击事件后,因为addEventListener默认是冒泡事件,所以监听事件会在底层事件冒泡过来时执行,在触发了事件后,去检测是否是我们要寻找的目标元素,如果不是,就会忽略过去,那我们不仅仅可以通过目标元素的标签是不是我们需要的目标元素,我们还可以根据目标元素的属性或者类名来进行检测,利用ele.maeches这个API来进行处理,

document.getElementById("myDiv").addEventListener("click",function(e) {
  // e.target 就是当前被点击的元素
 if (e.target && e.target.matches("a.classA")) {
  console.log("Anchor element clicked!");
  }
});

因此我们可以看得出来,使用事件代理这种方式,能够给我们带来很多的便捷,可以避免很多坑,使用事件代理是一种很强大的方法.

          感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery dialog键盘事件代码
Aug 01 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 #Javascript
分分钟玩转Vue.js组件
Oct 25 #Javascript
谈谈target=_new和_blank的不同之处
Oct 25 #Javascript
js实现上传图片预览方法
Oct 25 #Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 #Javascript
微信小程序 倒计时组件实现代码
Oct 24 #Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 #Javascript
You might like
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
js 替换
2008/02/19 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Angular7.2.7路由使用初体验
2019/03/01 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python数据类型详解(二)列表
2016/05/08 Python
python executemany的使用及注意事项
2017/03/13 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
linux面试题参考答案(4)
2014/09/21 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
校园公益广告语
2014/03/13 职场文书
化工专业求职信
2014/07/01 职场文书
学雷锋日活动总结
2015/02/06 职场文书
消防验收申请报告
2015/05/15 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
用python实现监控视频人数统计
2021/05/21 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
VUE递归树形实现多级列表
2022/07/15 Vue.js