事件委派

事件委派是指，把原本要给子元素绑定的事件，绑定到父元素上，这就表示把子元素的事件委派给父元素。由于事件有冒泡机制，当一个元素触发事件时，可以区分发生事件的是父元素还是子元素。

事件委派是通过on()方法来实现的，下面通过代码进行演示。

 1  <ul>
 2   <li>我是第1个li</li>
 3   <li>我是第2个li</li>
 4  </ul>
 5  <script>
 6   $("ul").on("click", "li:first-child", function() {
 7    alert("单击了li");  // 单击第1个li会触发此事件
 8   });
 9  </script>

上述代码中，click事件是绑定在父元素ul上的，但触发事件的是第1个li子元素，当子元素触发事件后，就会通过事件冒泡，执行父元素ul的事件处理程序了。

需要注意的是，在事件委派的情况下，事件处理函数中的this表示触发事件的元素，即上述代码中的第1个li元素，并不是委派事件的ul元素。

事件委派的优势在于，可以为未来动态创建的元素绑定事件。其原理是将事件委派给父元素后，在父元素中动态创建的子元素也会拥有事件。示例代码如下。

 1  <ul>
 2   <li>我是原有的li</li>
 3  </ul>
 4  <script>
 5   $("ul").on("click", "li", function() {
 6    alert("单击了li");
 7   });
 8   var li = $("<li>我是后来创建的li</li>");
 9   $("ul").append(li);
 10 </script>

上述代码中，第5~7行通过事件委派的方式为ul中的li元素绑定了单击事件，在执行第8~9行代码添加li元素后，新添加的li元素也可以触发单击事件。

小提示：

在早期版本的jQuery中，还有bind()、live()和delegate()等方法也可以实现事件绑定或事件委派，但在最新版本中已经被废弃，建议使用on()替代它们。