事件委托

dcr309duan 发布于2019-08-21 15:09 / 405人阅读

摘要：对事件处理程序过多问题的解决方案是事件委托，事件委托利用了事件的冒泡特性，指制定给一个事件处理程序，就可以管理某一类型的所有事件。

对" 事件处理程序过多 "问题的解决方案是事件委托，事件委托利用了事件的冒泡特性，指制定给一个事件处理程序，就可以管理某一类型的所有事件。例如click事件会一直冒泡到document层次，也就是说我们可以为整个页面制定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。以下面的为例。


Go somewhere 
Do something 
hello world!

其中包含三个被单击的列表项，传统做法需要添加三个事件；

 var a1 = document.getElementById("A");
var a2 = document.getElementById("B");
var a3 = document.getElementById("C");
//此处eventutil省略 为封装的事件处理程序
EventUtil.addHandler(a1, "click", function (event) {
location.href =""https://www.smallclown.cn;
});
EventUtil.addHandler(a2, "click", function (event) {
document.title = "i chenged the title"s title";
});
EventUtil.addHandler(a2, "click", function (event) {
console.log("hello world!");
});

利用事件委托，在需要以在DOM树中尽量最高的层次上添加一个事件处理程序，如下：

 var a4 = document.getElementById("D");
EventUtil.addHandler(a4, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target:id) {
case "A" :
location.href =""https://www.smallclown.cn;
case "B" :
document.title = "i chenged the title"s title";
case "C" :
console.log("hello world!");
}
});

更多内容下回在写，还有好多

海外云主机私有云委托事件事件委托事件委托c javascript事件委托

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

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

jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

摘要：源码源码行被点击了点击了，即委托的事件被点击了优先添加委托，再添加其他即委托在上的事件数量在下标为的位置插入委托事件解析可以看到，是优先添加委托事件，再添加自身事件，触发事件的时候也是按这个顺序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：请先回顾下我之前写的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

fireflow 2019-08-29 14:07 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

SexySix 2019-08-21 18:29 评论0 收藏0
好文推荐：javascript: 事件委托解析

摘要：前言之前不太明白事件委托。看了这个帖子，跟着代码操作了一遍，终于明白了事件委托。推荐理由一步一步，渐进式分析来说明事件委托。为签收快递，有两种办法一是三个人在公司门口等快递二是委托给前台代为签收。前言：之前不太明白事件委托。看了这个帖子，跟着代码操作了一遍，终于明白了事件委托。所以转载。推荐理由：一步一步，渐进式分析来说明事件委托。什么叫事件委托呢？它还有一个名字叫事件代理 ...

Wuv1Up 2019-08-21 17:35 评论0 收藏0