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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
Vue实现滑动拼图验证码功能
Sep 15 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python读取YAML文件过程详解
2019/12/30 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
运动会广播稿400字
2014/01/25 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
新品发布会主持词
2014/04/02 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL