事件代理
事件代理，让我们在父元素上绑定一个事件，它会响应孩子的点击事件。
// Attach a directly bound event handler
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
事件冒泡
每次当我们点击一个anchor的时候，这个事件就会往上冒泡，触发下面的这些父元素：
<a>、<li>、<ul #list>、<div #container>、<body>、<html>、document root
我们知道事件冒泡，那么我们可以创建一个代理事件：
// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
请看on函数的第二个参数，这个参数目的是告知点击的这个元素是否匹配指定的这个元素
两个好处
- 性能上更好，避免创建太多的事件对象
- 动态添加孩子的时候不用再去给它绑定事件