事件委托

dcr309duan 發布于2019-08-21 15:09 / 499人閱讀

摘要：對事件處理程序過多問題的解決方案是事件委托，事件委托利用了事件的冒泡特性，指制定給一個事件處理程序，就可以管理某一類型的所有事件。

對" 事件處理程序過多 "問題的解決方案是事件委托，事件委托利用了事件的冒泡特性，指制定給一個事件處理程序，就可以管理某一類型的所有事件。例如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!");
}
});

更多內容下回在寫，還有好多

云服務器 GPU云服務器委托事件事件委托事件委托c javascript事件委托

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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