[Javascript] 什麼是DOM Event委託?


Answers

事件委託允許您避免將事件偵聽器添加到特定節點; 相反,事件監聽器被添加到一個父代。 該事件偵聽器分析冒泡事件以查找子元素上的匹配。

JavaScript示例:

假設我們有一個包含多個子元素的父UL元素:

<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>

我們還要說,每個子元素被點擊時都需要發生。 您可以為每個單獨的LI元素添加一個單獨的事件偵聽器,但是如果LI元素經常被添加並從列表中刪除,該怎麼辦? 添加和刪除事件監聽器將是一場噩夢,尤其是如果添加和刪除代碼位於應用程序中的不同位置。 更好的解決方案是將一個事件監聽器添加到父UL元素。 但是,如果您將事件偵聽器添加到父級,您將如何知道哪個元素被點擊?

簡單:當事件冒泡到UL元素時,您檢查事件對象的目標屬性以獲取對實際點擊節點的引用。 以下是一個非常基本的JavaScript代碼片段,它說明了事件委派:

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
    // List item found!  Output the ID!
    console.log("List item ", e.target.id.replace("post-"), " was clicked!");
       }
 });

首先向父元素添加一個單擊事件偵聽器。 當事件監聽器被觸發時,檢查事件元素以確保它是要作出反應的元素類型。 如果它是一個LI元素,繁榮:我們有我們需要的! 如果它不是我們想要的元素,則該事件可以被忽略。 這個例子非常簡單--UL和LI是直接比較。 讓我們嘗試一些更困難的事情。 讓我們有一個擁有許多孩子的父DIV,但我們關心的是帶有classA CSS類的A標籤:

  // Get the parent DIV, add click listener...
  document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
    // Get the CSS classes
    var classes = e.target.className.split(" ");
    // Search for the CSS class!
    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....
            }
        }
    }

  }
});

http://davidwalsh.name/event-delegate

Question

任何人都可以在JavaScript中解釋事件委派,它有什麼用處?




Delegation是一種技術,其中對象向外部表達某些行為,但實際上委託將該行為實施到相關對象的責任。 這首先聽起來非常類似於代理模式,但它有著非常不同的目的。 委託是集中對象(方法)行為的抽像機制。

一般來說:使用代表團作為繼承的替代品。 繼承是一種很好的策略,當父對象與子對象之間存在密切關係時,繼承會將對象非常密切地耦合在一起。 通常,委派是表達類之間關係的更靈活的方式。

這種模式也被稱為“代理鏈”。 其他幾種設計模式使用授權 - 國家,策略和訪問者模式依賴於它。




C#中的委託類似於C或C ++中的函數指針。 使用委託允許程序員在委託對像中封裝對方法的引用。 然後可以將委託對像傳遞給可以調用引用方法的代碼,而無需在編譯時知道哪個方法將被調用。

請參閱此鏈接 - > http://www.akadia.com/services/dotnet_delegates_and_events.html