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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue中如何让子组件修改父组件数据
Jun 14 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
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
简单实现php上传文件功能
2017/09/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python获取本机外网ip的方法
2015/04/15 Python
python中尾递归用法实例详解
2015/04/28 Python
Python协程的用法和例子详解
2017/09/09 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
校本教研工作方案
2014/01/14 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
消防演习感想
2015/08/10 职场文书
决心书格式范文
2015/09/23 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
在js中修改html body的样式
2021/11/11 Javascript
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle