委托的概念

如果在一个父元素中有许多元素，并且您希望处理其中的事件—不要将处理程序绑定到每个元素。 相反，将单个处理程序绑定到它们的父处理程序，并从event.target获取子处理程序。 这个站点提供了关于如何实现事件委托的有用信息。 http://javascript.info/tutorial/event-delegation

Dom事件委托与计算机科学的定义有所不同。

它指的是处理来自许多元素(如表单元格)、来自父对象(如表)的冒泡事件。它可以使代码更简单，特别是在添加或删除元素时，并节省一些内存。

事件委托是使用容器元素上的事件处理程序处理冒泡事件，但只有在事件发生在容器内与给定条件匹配的元素上时才激活事件处理程序的行为。这可以简化容器内元素的事件处理。

例如，假设您想要处理对一个大表格中的任何表格单元格的单击。你可以写一个循环来将一个点击处理程序连接到每个单元格…或者，您可以在表上连接一个单击处理程序，并使用事件委托仅为表单元格触发它(而不是表标题或单元格周围行中的空白等)。

当你要从容器中添加和删除元素时，它也很有用，因为你不必担心在这些元素上添加和删除事件处理程序;只需将事件钩在容器上，并在事件冒泡时处理该事件。

下面是一个简单的例子(为了允许内联解释，它故意很冗长):处理容器表中任意td元素的单击:

// Handle the event on the container document.getElementById("container").addEventListener("click", function(event) { // Find out if the event targeted or bubbled through a `td` en route to this container element var element = event.target; var target; while (element && !target) { if (element.matches("td")) { // Found a `td` within the container! target = element; } else { // Not found if (element === this) { // We've reached the container, stop element = null; } else { // Go to the next parent in the ancestry element = element.parentNode; } } } if (target) { console.log("You clicked a td: " + target.textContent); } else { console.log("That wasn't a td in the container table"); } }); table { border-collapse: collapse; border: 1px solid #ddd; } th, td { padding: 4px; border: 1px solid #ddd; font-weight: normal; } th.rowheader { text-align: left; } td { cursor: pointer; } <table id="container"> <thead> <tr> <th>Language</th> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <th class="rowheader">English</th> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <th class="rowheader">Español</th> <td>uno</td> <td>dos</td> <td>tres</td> </tr> <tr> <th class="rowheader">Italiano</th> <td>uno</td> <td>due</td> <td>tre</td> </tr> </tbody> </table>

在深入了解细节之前，让我们先回顾一下DOM事件是如何工作的。

DOM事件从文档分派到目标元素(捕获阶段)，然后从目标元素冒泡回文档(冒泡阶段)。旧DOM3事件规范(现在已被取代，但图形仍然有效)中的图形非常好地显示了它:

并非所有事件都会冒泡，但大多数都会冒泡，包括点击。

上面代码示例中的注释描述了它是如何工作的。matches检查元素是否与CSS选择器匹配，但当然，如果你不想使用CSS选择器，你可以用其他方式检查是否有元素与你的条件匹配。

这段代码被编写为详细地调用各个步骤，但在模糊的现代浏览器上(如果你使用polyfill，也可以在IE上)，你可以使用nearest和contains来代替循环:

var target = event.target.closest("td");
    console.log("You clicked a td: " + target.textContent);
} else {
    console.log("That wasn't a td in the container table");
}

生活例子:

// Handle the event on the container document.getElementById("container").addEventListener("click", function(event) { var target = event.target.closest("td"); if (target && this.contains(target)) { console.log("You clicked a td: " + target.textContent); } else { console.log("That wasn't a td in the container table"); } }); table { border-collapse: collapse; border: 1px solid #ddd; } th, td { padding: 4px; border: 1px solid #ddd; font-weight: normal; } th.rowheader { text-align: left; } td { cursor: pointer; } <table id="container"> <thead> <tr> <th>Language</th> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <th class="rowheader">English</th> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <th class="rowheader">Español</th> <td>uno</td> <td>dos</td> <td>tres</td> </tr> <tr> <th class="rowheader">Italiano</th> <td>uno</td> <td>due</td> <td>tre</td> </tr> </tbody> </table>

closest checks the element you call it on to see if it matches the given CSS selector and, if it does, returns that same element; if not, it checks the parent element to see if it matches, and returns the parent if so; if not, it checks the parent's parent, etc. So it finds the "closest" element in the ancestor list that matches the selector. Since that might go past the container element, the code above uses contains to check that if a matching element was found, it's within the container — since by hooking the event on the container, you've indicated you only want to handle elements within that container.

回到我们的表格例子，这意味着如果你在一个表格单元格中有一个表格，它不会匹配包含表格的表格单元格:

// Handle the event on the container document.getElementById("container").addEventListener("click", function(event) { var target = event.target.closest("td"); if (target && this.contains(target)) { console.log("You clicked a td: " + target.textContent); } else { console.log("That wasn't a td in the container table"); } }); table { border-collapse: collapse; border: 1px solid #ddd; } th, td { padding: 4px; border: 1px solid #ddd; font-weight: normal; } th.rowheader { text-align: left; } td { cursor: pointer; } <!-- The table wrapped around the #container table --> <table> <tbody> <tr> <td> <!-- This cell doesn't get matched, thanks to the `this.contains(target)` check --> <table id="container"> <thead> <tr> <th>Language</th> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <th class="rowheader">English</th> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <th class="rowheader">Español</th> <td>uno</td> <td>dos</td> <td>tres</td> </tr> <tr> <th class="rowheader">Italiano</th> <td>uno</td> <td>due</td> <td>tre</td> </tr> </tbody> </table> </td> <td> This is next to the container table </td> </tr> </tbody> </table>

事件委托允许您避免向特定节点添加事件侦听器;相反，事件侦听器被添加到一个父级。该事件侦听器分析冒泡事件以在子元素上找到匹配。

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

Let's also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual LI element, but what if LI elements are frequently added and removed from the list? Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent UL element. But if you add the event listener to the parent, how will you know which element was clicked?

简单:当事件弹出到UL元素时，检查事件对象的target属性以获得对实际单击的节点的引用。下面是一个非常基本的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!");
    }
});

Start by adding a click event listener to the parent element. When the event listener is triggered, check the event element to ensure it's the type of element to react to. If it is an LI element, boom: we have what we need! If it's not an element that we want, the event can be ignored. This example is pretty simple -- UL and LI is a straight-forward comparison. Let's try something more difficult. Let's have a parent DIV with many children but all we care about is an A tag with the classA CSS class:

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

委托是一种技术，在这种技术中，一个对象向外部表达某种行为，但实际上将实现该行为的责任委托给一个关联对象。乍听起来，这与代理模式非常相似，但其目的却大不相同。委托是一种集中对象(方法)行为的抽象机制。

一般来说:使用委托来替代继承。继承是一个很好的策略，当父对象和子对象之间存在密切的关系时，但是，继承会非常紧密地结合对象。通常，委托是表达类之间关系的更灵活的方式。

这种模式也称为“代理链”。其他一些设计模式使用委托——状态模式、策略模式和访问者模式都依赖于它。

事件的代表团

将事件监听器附加到父元素，当子元素上发生事件时触发该监听器。

事件传播

当事件通过DOM从子元素移动到父元素时，这称为事件传播，因为事件在DOM中传播或移动。

在本例中，按钮的事件(onclick)被传递给父段。

$(document).ready(function() { $(".spoiler span").hide(); /* add event onclick on parent (.spoiler) and delegate its event to child (button) */ $(".spoiler").on( "click", "button", function() { $(".spoiler button").hide(); $(".spoiler span").show(); } ); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <p class="spoiler"> <span>Hello World</span> <button>Click Me</button> </p>

Codepen