深入分析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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
js获取Get值的方法
2016/09/29 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
理解Python中函数的参数
2015/04/27 Python
Python实现数据库编程方法详解
2015/06/09 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
化学教学随笔感言
2014/02/19 职场文书
代理协议书
2014/04/22 职场文书
标准单位租车协议书
2014/09/23 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js