深入分析Javascript事件代理


Posted in Javascript onJanuary 30, 2016

很久很久以来,总感觉事件发生与事件代理到之间没什么鸟区别。

最近,又看了一下,感觉区别其实真不大!看怎么理解吧。

要搞清楚什么是事件代理,就需要先搞清楚什么是代理。

从商业角度来讲,代理就是:我有货,你没货,但丫我没时间、没精力全部卖掉,而你一天闲的蛋疼,只剩下时间了。于是,我委托你帮我买,然后哥给你提成。这个过程中,你实际上相当于也有了货。

OK,怎么从字面来理解事件代理一词的含义?后文有讲。

一 先看一个真实的,新手绑定onclik事件的例子

如果按照之前的我,我会怎么给每一个li标签,添加onlick呢?废话,要是我,肯定简单粗暴。
循环每一个li,然后全部绑定onlick。

于是我的代码应该是这样子:

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
  aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

好像看起来没问题了。虽然,有些文章说这样很消耗性能,但是,我丫电脑好,老子管你性能,不能太认真。

二 突然有一天,我发现通过js添加进来的新的li,没有绑定onlcik

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

然后,点击maomaoliang,它并没有绑定我的onlick,这是为什么?
哦,原来,我原有的li跟我后面生成的li根本不是同时发生的,在创建新的li元素之前,已经给存在的li加事件了。好吧,好烦啊。

三 那怎么破?

然后,又好(无)奇(奈)的看了一些文章,原来有个叫事件代理的东西可以用。我就试试看吧!于是改写了部分代码,像这样:

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

结果,点击新的li,居然也触发了fn函数。好吧,身为一个好奇心驱动的肉身,我怎么能不求甚解呢?还是要踏实点,搞清楚这其中的奥秘才行。

于是,看了事件代理的资料。

首先,要知道什么是事件冒泡:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

然后,再回到之前的问题“怎么从字面来理解事件代理一词的含义”,谁代理了事件?或者事件代理了谁?
以本文的例子来讲,看看改动后的代码,我把onlick事件绑定到了ul标签上面,而不是li标签。于是,当我点击任何一个li标签(不管是动态生成的还是之前就有的)是,这个事件就像泡泡一样,冒啊冒。正常的情况下,ul也会绑定onclick,body也会绑定到onclick,也就说它会冒泡到最根层的元素。但我这里给ul绑定了onlick,那么这时,ul会把泡泡截住,事件也就停止上升,无法抵达body标签。

接着, var target = ev.target || ev.srcElement;这一句话,相当于告诉了我,我究竟点的是谁,谁才是target。如果,这个target刚刚好就是li标签if (target.nodeName.toLowerCase() == 'li'),那么执行fn函数。

最后,我骄傲的回答了那个问题:table代理了onlick事件!

四 回忆一下事件代理的步骤

父元素绑定事件
父元素知道事件的实际发生目标是谁
我们要对目标进行判断,如果是我们需要的元素,则发生回调函数(所以要学好选择器的使用)

五 最后总结,事件代理两大好处

性能不小心得到了优化
动态添加的元素也能绑定事件了

六 需要注意的一点是

上述针对的是原生js事件绑定来讲的,如果你用到了jquery。并把代码改成了如下的样子:

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

这样一来,新添加的li标签,也能绑click,是不是很方便、很简单,是不是感觉学js没什么卵用。

哈哈,这样想很正常,我以前也这么想,但是,做了一些东西之后,发现jquery还真的不够用了!但是基本够用!

虽然,大神们都说要学js,但我还是觉得可以先学jquery,之后再学js,效果也可以的。

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
基于form-data请求格式详解
Oct 29 Javascript
详解javascript实现瀑布流列式布局
Jan 29 #Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 #Javascript
理解Javascript文件动态加载
Jan 29 #Javascript
JavaScript操作select元素和option的实例代码
Jan 29 #Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 #Javascript
Angularjs中UI Router全攻略
Jan 29 #Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
php 邮件发送问题解决
2014/03/22 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python开发利器之ulipad的使用实践
2017/03/16 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
什么是Rollback Segment
2013/04/22 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
自强之星事迹材料
2014/05/12 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Python中的pprint模块
2021/11/27 Python