JavaScript如何實(shí)現(xiàn)事件代理和委托

這篇文章主要介紹“JavaScript如何實(shí)現(xiàn)事件代理和委托”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“JavaScript如何實(shí)現(xiàn)事件代理和委托”文章能幫助大家解決問(wèn)題。

JavaScript事件代理

首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個(gè)非常有用也很有趣的功能。當(dāng)我們需要對(duì)很多元素添加事件的時(shí)候，可以通過(guò)將事件添加到它們的父節(jié)點(diǎn)而將事件委托給父節(jié)點(diǎn)來(lái)觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機(jī)制，后面會(huì)詳細(xì)介紹。下面我們具體舉個(gè)例子來(lái)解釋如何使用這個(gè)特性。這個(gè)例子主要取自David  Walsh的相關(guān)文章(How JavaScript Event Delegation Works)。

假設(shè)有一個(gè) UL 的父節(jié)點(diǎn)，包含了很多個(gè) Li 的子節(jié)點(diǎn)：

<ul id="parent-list">   <li id="post-1">Item 1</li>   <li id="post-2">Item 2</li>   <li id="post-3">Item 3</li>   <li id="post-4">Item 4</li>   <li id="post-5">Item 5</li>   <li id="post-6">Item 6</li> </ul>

當(dāng)我們的鼠標(biāo)移到Li上的時(shí)候，需要獲取此Li的相關(guān)信息并飄出懸浮窗以顯示詳細(xì)信息，或者當(dāng)某個(gè)Li被點(diǎn)擊的時(shí)候需要觸發(fā)相應(yīng)的處理事件。我們通常的寫(xiě)法，是為每個(gè)Li都添加一些類似onMouseOver或者onClick之類的事件監(jiān)聽(tīng)。

function addListeners4Li(liNode){     liNode.onclick = function clickHandler(){...};     liNode.onmouseover = function mouseOverHandler(){...} }  window.onload = function(){     var ulNode = document.getElementById("parent-list");     var liNodes = ulNode.getElementByTagName("Li");     for(var i=0, l = liNodes.length; i < l; i++){         addListeners4Li(liNodes[i]);     }    }

如果這個(gè)UL中的Li子元素會(huì)頻繁地添加或者刪除，我們就需要在每次添加Li的時(shí)候都調(diào)用這個(gè)addListeners4Li方法來(lái)為每個(gè)Li節(jié)點(diǎn)添加事件處理函數(shù)。這就添加的復(fù)雜度和出錯(cuò)的可能性。

更簡(jiǎn)單的方法是使用事件代理機(jī)制，當(dāng)事件被拋到更上層的父節(jié)點(diǎn)的時(shí)候，我們通過(guò)檢查事件的目標(biāo)對(duì)象(target)來(lái)判斷并獲取事件源Li。下面的代碼可以完成我們想要的效果：

// 獲取父節(jié)點(diǎn)，并為它添加一個(gè)click事件 document.getElementById("parent-list").addEventListener("click",function(e) {   // 檢查事件源e.targe是否為L(zhǎng)i   if(e.target && e.target.nodeName.toUpperCase == "LI") {     // 真正的處理過(guò)程在這里     console.log("List item ",e.target.id.replace("post-")," was clicked!");   } });

為父節(jié)點(diǎn)添加一個(gè)click事件，當(dāng)子節(jié)點(diǎn)被點(diǎn)擊的時(shí)候，click事件會(huì)從子節(jié)點(diǎn)開(kāi)始向上冒泡。父節(jié)點(diǎn)捕獲到事件之后，通過(guò)判斷e.target.nodeName來(lái)判斷是否為我們需要處理的節(jié)點(diǎn)。并且通過(guò)e.target拿到了被點(diǎn)擊的Li節(jié)點(diǎn)。從而可以獲取到相應(yīng)的信息，并作處理。

事件冒泡及捕獲

之前的介紹中已經(jīng)說(shuō)到了瀏覽器的事件冒泡機(jī)制。這里再詳細(xì)介紹一下瀏覽器處理DOM事件的過(guò)程。對(duì)于事件的捕獲和處理，不同的瀏覽器廠商有不同的處理機(jī)制，這里我們主要介紹W3C對(duì)DOM2.0定義的標(biāo)準(zhǔn)事件。

DOM2.0模型將事件處理流程分為三個(gè)階段：一、事件捕獲階段，二、事件目標(biāo)階段，三、事件起泡階段。如圖：

事件捕獲：當(dāng)某個(gè)元素觸發(fā)某個(gè)事件(如onclick)，頂層對(duì)象document就會(huì)發(fā)出一個(gè)事件流，隨著DOM樹(shù)的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去，直到到達(dá)事件真正發(fā)生的目標(biāo)元素。在這個(gè)過(guò)程中，事件相應(yīng)的監(jiān)聽(tīng)函數(shù)是不會(huì)被觸發(fā)的。

事件目標(biāo)：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。如果沒(méi)有綁定監(jiān)聽(tīng)函數(shù)，那就不執(zhí)行。

事件起泡：從目標(biāo)元素開(kāi)始，往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來(lái)組織事件的冒泡傳播。

jQuery和Dojo中delegate函數(shù)

下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。

$("#link-list").delegate("a", "click", function(){   // "$(this)" is the node that was clicked   console.log("you clicked a link!",$(this)); });

jQuery的delegate的方法需要三個(gè)參數(shù)，一個(gè)選擇器，一個(gè)時(shí)間名稱，和事件處理函數(shù)。

而Dojo的與jQuery相似，僅是兩者的編程風(fēng)格上的差別：

require(["dojo/query","dojox/NodeList/delegate"], function(query,delegate){      query("#link-list").delegate("a","onclick",function(event) {     // "this.node" is the node that was clicked     console.log("you clicked a link!",this);   }); })

Dojo的delegate模塊在dojox.NodeList中，提供的接口與jQuery一樣，參數(shù)也相同。

優(yōu)點(diǎn)通過(guò)上面的介紹，大家應(yīng)該能夠體會(huì)到使用事件委托對(duì)于web應(yīng)用程序帶來(lái)的幾個(gè)優(yōu)點(diǎn)：

1.管理的函數(shù)變少了。不需要為每個(gè)元素都添加監(jiān)聽(tīng)函數(shù)。對(duì)于同一個(gè)父節(jié)點(diǎn)下面類似的子元素，可以通過(guò)委托給父元素的監(jiān)聽(tīng)函數(shù)來(lái)處理事件。

2.可以方便地動(dòng)態(tài)添加和修改元素，不需要因?yàn)樵氐母膭?dòng)而修改事件綁定。

3.JavaScript和DOM節(jié)點(diǎn)之間的關(guān)聯(lián)變少了，這樣也就減少了因循環(huán)引用而帶來(lái)的內(nèi)存泄漏發(fā)生的概率。

寫(xiě)到這里，突然想起了之前對(duì)于Dojo  DataGrid的困惑：那么多的rows和cells，如何處理他們事件之間的關(guān)系?，F(xiàn)在想想，使用委托就很簡(jiǎn)單了。所有的事件委托到grid最外層的節(jié)點(diǎn)上，當(dāng)事件發(fā)生的時(shí)候通過(guò)一些方法來(lái)獲取和添加事件的額外屬性，如rowIndex,  cellIndex，之后在分配到onRowClick,onCellClick之類的處理函數(shù)上。

在JavaScript編程中使用代理

上面介紹的是對(duì)DOM事件處理時(shí)，利用瀏覽器冒泡機(jī)制為DOM元素添加事件代理。其實(shí)在純JS編程中，我們也可以使用這樣的編程模式，來(lái)創(chuàng)建代理對(duì)象來(lái)操作目標(biāo)對(duì)象。這里引用司徒正美相關(guān)文章中的一個(gè)例子：

var delegate = function(client, clientMethod) {         return function() {             return clientMethod.apply(client, arguments);         }     }     var ClassA = function() {         var _color = "red";         return {             getColor: function() {                 console.log("Color: " + _color);             },             setColor: function(color) {                 _color = color;             }         };     };      var a = new ClassA();     a.getColor();     a.setColor("green");     a.getColor();     console.log("執(zhí)行代理！");     var d = delegate(a, a.setColor);     d("blue");     console.log("執(zhí)行完畢！");     a.getColor();

上面的例子中，通過(guò)調(diào)用delegate()函數(shù)創(chuàng)建的代理函數(shù)d來(lái)操作對(duì)a的修改。這種方式盡管是使用了apply(call也可以)來(lái)實(shí)現(xiàn)了調(diào)用對(duì)象的轉(zhuǎn)移，但是從編程模式上實(shí)現(xiàn)了對(duì)某些對(duì)象的隱藏，可以保護(hù)這些對(duì)象不被隨便訪問(wèn)和修改。

在很多框架中都引用了委托這個(gè)概念用來(lái)指定方法的運(yùn)行作用域。比較典型的如dojo.hitch(scope,method)和ExtJS的createDelegate(obj,args)。

關(guān)于“JavaScript如何實(shí)現(xiàn)事件代理和委托”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。