Javascript事件代理の真理

lijy91 发布于2019-08-19 17:32 / 1951人阅读

摘要：参考资料事件代理很久很久以来，总感觉事件发生与事件代理到之间没什么鸟区别。要搞清楚什么是事件代理，就需要先搞清楚什么是代理。，怎么从字面来理解事件代理一词的含义后文有讲。于是，看了事件代理的资料。这一过程被称为事件冒泡。

参考资料：js-事件代理

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

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

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

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

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

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

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

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


   001
   002
   003

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

二突然有一天，我发现通过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绑定了onlick，那么这时，ul会捕获冒泡上来的onclick事件。

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

最后，我骄傲的回答了那个问题：ul标签代理了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，效果也可以的。

大神嘛，哪懂叼丝的痛楚。-。-

GPU云服务器云服务器 Javascript事件代理事件代理 javascript事件 javascript键盘事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78611.html

网页与浏览器窗口の真理

摘要：参考资料首先，网页大小与浏览器窗口大小从来都不是一回事这尼玛最近才明白，坑所以，要知道以下常网页的范围我们在代码里面设置的或者脚本，改变的样式就是网页范围下的改变，也就是说，我们设置的大小是网页的不是浏览器窗口的大小。参考资料首先，网页大小与浏览器窗口大小从来都不是一回事！！！这尼玛最近才明白，坑~ 所以，要知道以下常: 网页的范围我们在代码里面设置的CSS或者js脚本，改变的样式...

tinysun1234 2019-08-30 12:44 评论0 收藏0
JavaScript の客户端检测

摘要：博文模块增强模式进行客户端检测标签博文常用的检测方式为能力检测用户代理检测这里有用户代理检测检测插件非浏览器是一个包含浏览器插件的数组这个数组的每一项都包含插件的名字插件的描述插件的文件名插件所处理的类型数量检测插件在中无效方法用于把字符串 [博文]模块增强模式进行客户端检测标签：博文常用的检测方式为: [ ] 1 . 能力检测 [ ] 2 . 用户代理检测这里有 2 ...

KnewOne 2019-08-20 17:44 评论0 收藏0
【呆萌の研究】JavaScriptの闭包

摘要：为什么会产生闭包究其根本，是因为代表的函数包含的作用域。而在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位直到作为作用域链终点的全局执行环境。前言此文的内容主要是来自看书的总结+小小的实践哦~会不断更新总结。什么是闭包书上是这样定义闭包的：有权访问另一个函数作用域中变量的函数。举一个例子： function test(){ va...

CHENGKANG 2019-08-26 11:47 评论0 收藏0
何为语法树

摘要：原文链接何为语法树什么是语法树你是否曾想过，这个世界存在这么多语言的意义。语法树，计算机描述世界真理的树状结构。不同的语言，都会配之不同的语法分析器，而语法分析器是把源代码作为字符串读入解析，并建立语法树的程序。原文链接：BlueSun | 何为语法树什么是语法树？你是否曾想过，这个世界存在这么多语言的意义。假如现在你面前有一个物体，它是一个不规则的圆体，整个身体通红，头部还有...

hikui 2019-08-19 17:52 评论0 收藏0