on的委托机制

$( "#dataTable tbody tr" ).on( "click", function() {  

alert( $( this ).text() );

});

$( "#dataTable tbody" ).on( "click", "tr", function() {  

alert( $( this ).text() );

});

tr是tbody的子元素，tr上的click事件会冒泡到tbody上。

第一种方式，是监听tr元素的click事件；

第二种方式，是监听tbody的click事件，然后检查触发事件的target是tr元素时（从tr冒泡而来）触发

第二种方式被称作事件代理，即后代元素（tr）的触发的事件等到冒泡至父元素（tbody）时再处理

什么时候使用委托事件：

1.对未被创建的元素添加事件监听

2.避免频繁添加或删除event handler，委托父元素来进行事件处理

使用委托事件的优点：

1.大量减少监听元素的开销

使使用后果，不用每个tr都进行事件绑定，只需要在tbody处进行绑定即可，委托tbody进行对tr点击的响应。

大神的分享：事件的委托处理（Event Delegation）

javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。

利用这一点，可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？

　　$("td").on("click", function(){

　　　　$(this).toggleClass("click");

　　});

回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。

因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。

　　$("table").on("click", "td", function(){

　　　　$(this).toggleClass("click");

　　});

更好的写法，则是把事件绑定在document对象上面。

　　$(document).on("click", "td", function(){

　　　　$(this).toggleClass("click");

　　});

如果要取消事件的绑定，就使用off()方法。

　　$(document).off("click", "td");