深入分析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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
javascript清空table表格的方法
May 14 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
vue $mount 和 el的区别说明
Sep 11 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
example1.php
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php HandlerSocket的使用
2011/05/02 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Python学习入门之区块链详解
2017/07/25 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
德语专业求职信
2014/03/12 职场文书
学生安全责任书
2014/04/15 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
安全生产承诺书范文
2014/05/22 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2015年市场部工作总结
2015/04/30 职场文书
汉字听写大会观后感
2015/06/12 职场文书
python画条形图的具体代码
2022/04/20 Python