這篇文章運用簡單易懂的例子給大家介紹JavaScript事件委托的原理和使用方法，文章內(nèi)容步步緊湊，希望大家根據(jù)這篇文章可以有所收獲。
如今的JavaScript技術(shù)界里最火熱的一項技術(shù)應該是‘事件委托(event delegation)’了。使用事件委托技術(shù)能讓你避免對特定的每個節(jié)點添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件?；靖拍罘浅：唵?，但仍有很多人不理解事件委托的工作原理。這里我將要解釋事件委托是如何工作的，并提供幾個純JavaScript的基本事件委托的例子。
假定我們有一個UL元素，它有幾個子元素：
我們還假設(shè)，當每個子元素被點擊時，將會有各自不同的事件發(fā)生。你可以給每個獨立的li元素添加事件監(jiān)聽器，但有時這些li元素可能會被刪除，可能會有新增，監(jiān)聽它們的新增或刪除事件將會是一場噩夢，尤其是當你的監(jiān)聽事件的代碼放在應用的另一個地方時。但是，如果你將監(jiān)聽器安放到它們的父元素上呢？你如何能知道是那個子元素被點擊了？
簡單：當子元素的事件冒泡到父ul元素時，你可以檢查事件對象的target屬性，捕獲真正被點擊的節(jié)點元素的引用。下面是一段很簡單的JavaScript代碼，演示了事件委托的過程：
重慶分公司
重慶分公司
// 找到父元素，添加監(jiān)聽器...
document.getElementById("parent-list").addEventListener("click",function(e) {
// e.target是被點擊的元素!
// 如果被點擊的是li元素
if(e.target && e.target.nodeName == "LI") {
// 找到目標，輸出ID!
console.log("List item ",e.target.id.replace("post-")," was clicked!");
}
});第一步是給父元素添加事件監(jiān)聽器。當有事件觸發(fā)監(jiān)聽器時，檢查事件的來源，排除非li子元素事件。如果是一個li元素，我們就找到了目標！如果不是一個li元素，事件將被忽略。這個例子非常簡單，UL和li是標準的父子搭配。讓我們試驗一些差異比較大的元素搭配。假設(shè)我們有一個父元素p，里面有很多子元素，但我們關(guān)心的是里面的一個帶有”classA” CSS類的A標記：
// 獲得父元素p, 添加監(jiān)聽器...
document.getElementById("myp").addEventListener("click",function(e) {
// e.target是被點擊的元素
if(e.target && e.target.nodeName == "A") {
// 獲得CSS類名
var classes = e.target.className.split(" ");
// 搜索匹配!
if(classes) {
// For every CSS class the element has...
for(var x = 0; x < classes.length; x++) {
// If it has the CSS class we want...
if(classes[x] == "classA") {
// Bingo!
console.log("Anchor element clicked!");
// Now do something here....
}
}
}
}
});上面這個例子中不僅比較了標簽名，而且比較了CSS類名。雖然稍微復雜了一點，但還是很具代表性的。比如，如果某個A標記里有一個span標記，則這個span將會成為target元素。這個時候，我們需要上溯DOM樹結(jié)構(gòu)，找到里面是否有一個 A.classA 的元素。
因為大部分程序員都會使用jQuery等工具庫來處理DOM元素和事件，我建議大家都使用里面的事件委托方法，因為這里工具庫里都提供了高級的委托方法和元素甄別方法。
看完上述內(nèi)容，你們對JavaScript事件委托的原理和使用方法大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
