您好,登錄后才能下訂單哦!
JavaScript中怎么實(shí)現(xiàn)事件代理和委托,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
JavaScript事件代理
首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個(gè)非常有用也很有趣的功能。當(dāng)我們需要對(duì)很多元素添加事件的時(shí)候,可以通過將事件添加到它們的父節(jié)點(diǎn)而將事件委托給父節(jié)點(diǎn)來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機(jī)制,后面會(huì)詳細(xì)介紹。下面我們具體舉個(gè)例子來解釋如何使用這個(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)的處理事件。我們通常的寫法,是為每個(gè)Li都添加一些類似onMouseOver或者onClick之類的事件監(jiān)聽。
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方法來為每個(gè)Li節(jié)點(diǎn)添加事件處理函數(shù)。這就添加的復(fù)雜度和出錯(cuò)的可能性。
更簡單的方法是使用事件代理機(jī)制,當(dāng)事件被拋到更上層的父節(jié)點(diǎn)的時(shí)候,我們通過檢查事件的目標(biāo)對(duì)象(target)來判斷并獲取事件源Li。下面的代碼可以完成我們想要的效果:
// 獲取父節(jié)點(diǎn),并為它添加一個(gè)click事件 document.getElementById("parent-list").addEventListener("click",function(e) { // 檢查事件源e.targe是否為Li if(e.target && e.target.nodeName.toUpperCase == "LI") { // 真正的處理過程在這里 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)開始向上冒泡。父節(jié)點(diǎn)捕獲到事件之后,通過判斷e.target.nodeName來判斷是否為我們需要處理的節(jié)點(diǎn)。并且通過e.target拿到了被點(diǎn)擊的Li節(jié)點(diǎn)。從而可以獲取到相應(yīng)的信息,并作處理。
事件冒泡及捕獲
之前的介紹中已經(jīng)說到了瀏覽器的事件冒泡機(jī)制。這里再詳細(xì)介紹一下瀏覽器處理DOM事件的過程。對(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樹的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去,直到到達(dá)事件真正發(fā)生的目標(biāo)元素。在這個(gè)過程中,事件相應(yīng)的監(jiān)聽函數(shù)是不會(huì)被觸發(fā)的。
事件目標(biāo):當(dāng)?shù)竭_(dá)目標(biāo)元素之后,執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù),那就不執(zhí)行。
事件起泡:從目標(biāo)元素開始,往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù),這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來組織事件的冒泡傳播。
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)通過上面的介紹,大家應(yīng)該能夠體會(huì)到使用事件委托對(duì)于web應(yīng)用程序帶來的幾個(gè)優(yōu)點(diǎn):
1.管理的函數(shù)變少了。不需要為每個(gè)元素都添加監(jiān)聽函數(shù)。對(duì)于同一個(gè)父節(jié)點(diǎn)下面類似的子元素,可以通過委托給父元素的監(jiān)聽函數(shù)來處理事件。
2.可以方便地動(dòng)態(tài)添加和修改元素,不需要因?yàn)樵氐母膭?dòng)而修改事件綁定。
3.JavaScript和DOM節(jié)點(diǎn)之間的關(guān)聯(lián)變少了,這樣也就減少了因循環(huán)引用而帶來的內(nèi)存泄漏發(fā)生的概率。
寫到這里,突然想起了之前對(duì)于Dojo DataGrid的困惑:那么多的rows和cells,如何處理他們事件之間的關(guān)系。現(xiàn)在想想,使用委托就很簡單了。所有的事件委托到grid最外層的節(jié)點(diǎn)上,當(dāng)事件發(fā)生的時(shí)候通過一些方法來獲取和添加事件的額外屬性,如rowIndex, cellIndex,之后在分配到onRowClick,onCellClick之類的處理函數(shù)上。
在JavaScript編程中使用代理
上面介紹的是對(duì)DOM事件處理時(shí),利用瀏覽器冒泡機(jī)制為DOM元素添加事件代理。其實(shí)在純JS編程中,我們也可以使用這樣的編程模式,來創(chuàng)建代理對(duì)象來操作目標(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();
上面的例子中,通過調(diào)用delegate()函數(shù)創(chuàng)建的代理函數(shù)d來操作對(duì)a的修改。這種方式盡管是使用了apply(call也可以)來實(shí)現(xiàn)了調(diào)用對(duì)象的轉(zhuǎn)移,但是從編程模式上實(shí)現(xiàn)了對(duì)某些對(duì)象的隱藏,可以保護(hù)這些對(duì)象不被隨便訪問和修改。
在很多框架中都引用了委托這個(gè)概念用來指定方法的運(yùn)行作用域。比較典型的如dojo.hitch(scope,method)和ExtJS的createDelegate(obj,args)。
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。