JavaScript事件委托

事件委托又叫做事件代理，它是利用事件冒泡，你只需要指定一个事件处理程序，就可以管理某一个类型的所有事件。

以click事件为例，如果需要为一个ul列表中的所有li元素绑定事件，那么传统的做法是遍历这个列表，然后再逐个添加click事件。那么如果列表非常多呢，就会非常影响性能，如果li列表中存在动态加入的内容，那么这段新加入的元素将会绑定不上click事件。

那么，如果使用事件委托呢，在父元素上添加一个click事件即可，然后再在内部点击元素的时候，事件将会向外部冒泡，那么就可以监听到内部列表的点击事件了。同时，在列表中追加新的内容，依然能监听到事件点击。

例如一个表格，点击td时候需要让其变色，可以使用如下的写法。

<table id="table">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

var tableElem = document.getElementById('table')
tableElem.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target.nodeName.toLowerCase() == 'td' ? (target.style.background = 'red') : alert('table clicked');
}

在jQuery中，使用on就可以轻松搞定了。上述代码换做jQuery实现。

$('#table').on('click', 'td', function() {
    $(this).css('background', 'red');
})