委托概念
如果一个父元素中有很多元素，并且您想处理它们的事件-不要将处理程序绑定到每个元素。相反，将signle处理程序绑定到它们的父项，并从 event.target 获取子项
那么，什么是 JavaScript 事件委托？
事件委托是一种简单的技术，通过它您可以将单个事件侦听器附加到父元素，该事件将为匹配选择器的所有子元素触发，无论这些子元素现在存在还是将来添加。
事件委托利用了 JavaScript 事件中两个经常被忽视的特性：事件冒泡和目标元素
什么是事件冒泡？
在事件冒泡中，事件首先被最里面的元素捕获和处理，然后传播到外部元素
什么是目标元素？
任何事件的目标元素都是原始元素，并存储在事件对象的属性中。
例子
<div id="container">
<ul id="list">
<li><a href="http://domain1.com">Item 1</a></li>
<li><a href="/local/path/1">Item 2</a></li>
<li><a href="/local/path/2">Item 2</a></li>
<li><a href="http://domain4.com">Item3</a></li>
</ul>
</div>
单击#list 组中的锚点时，我们希望将其文本记录到控制台。通常我们可以使用 .on() 方法直接绑定到每个锚点的点击事件：
// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
虽然这工作得很好，但也有缺点。考虑一下当我们在绑定了上面的监听器之后添加一个新的锚点会发生什么：
// add a new element on to our existing list
$( "#list" ).append( "<li><a href='#'>Item 5</a></li>" )
如果我们点击我们新添加的项目，什么都不会发生。这是因为我们之前附加的直接绑定的事件处理程序。直接事件仅在调用 .on() 方法时附加到元素。在这种情况下，由于调用 .on() 时我们的新锚点不存在，因此它不会获取事件处理程序。
既然我们知道事件是如何冒泡的，我们可以创建一个委托事件：
// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
请注意我们如何将 a 部分从选择器移动到 .on() 方法的第二个参数位置。第二个，选择器参数告诉处理程序监听指定的事件，当它听到它时，检查该事件的触发元素是否与第二个参数匹配。在这种情况下，触发事件是我们的锚标记，它与该参数匹配。由于匹配，我们的匿名函数将执行。现在，我们已将一个单击事件侦听器附加到我们的，它将侦听对其子锚点的点击，而不是仅将未知数量的直接绑定事件附加到现有锚标记。
事件委托有什么优势？
只给页面附加一个事件监听器，而不是五百个
动态创建的元素仍将绑定到事件处理程序。
希望这可以帮助您直观地了解事件委托背后的概念，并让您相信委托的力量！
访问：http://www.scriptcafe.in/2014/03/what-is-event-delegation-in-jquery.html