深入分析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 相关文章推荐
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
Node.js实现简单管理系统
Sep 23 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
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
初识laravel5
2015/03/02 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
python定时器使用示例分享
2014/02/16 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python select.select模块通信全过程解析
2017/09/20 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
2013的个人自我评价
2013/12/26 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Django框架中视图的用法
2022/06/10 Python