對jQuery中on方法委託事件的理解

關於on方法中的委託事件,官方JQ API如下:

http://api.jquery.com/on/#on-events-selector-data-handler

參考大牛阮一峯的博文:

http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html


什麼時候使用委託事件:

1.對未被創建的元素添加事件監聽

2.避免頻繁添加或刪除event handler,委託父元素來進行事件處理


使用委託事件的優點:

1.大量減少監聽元素的開銷


使用實例

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

使用後果,不用每個tr都進行事件綁定,只需要在tbody處進行綁定即可,委託tbody進行對tr點擊的響應。


對於on的第二個參數,官方API的解釋是:對觸發事件元素的後代元素的過濾

個人理解:

過濾之後,this變成tr,事件冒泡到tbody,然後對tr進行操作。

其實on的底層是用了addEventListener,所謂的委託,其實就是借用事件冒泡機制,而且可以指定event.target和event.currentTarget(==this)來指定哪個事件對象





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章