對(duì)jQuery中on方法委托事件的理解

發(fā)布時(shí)間：2020-10-11 15:02:41 來(lái)源：網(wǎng)絡(luò) 閱讀：3839 作者：qz357 欄目：web開(kāi)發(fā)

關(guān)于on方法中的委托事件，官方JQ API如下：

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

參考大牛阮一峰的博文：

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

什么時(shí)候使用委托事件：

1.對(duì)未被創(chuàng)建的元素添加事件監(jiān)聽(tīng)

2.避免頻繁添加或刪除event handler，委托父元素來(lái)進(jìn)行事件處理

使用委托事件的優(yōu)點(diǎn)：

1.大量減少監(jiān)聽(tīng)元素的開(kāi)銷(xiāo)

使用實(shí)例

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

使用后果，不用每個(gè)tr都進(jìn)行事件綁定，只需要在tbody處進(jìn)行綁定即可，委托tbody進(jìn)行對(duì)tr點(diǎn)擊的響應(yīng)。

對(duì)于on的第二個(gè)參數(shù)，官方API的解釋是：對(duì)觸發(fā)事件元素的后代元素的過(guò)濾

個(gè)人理解：

過(guò)濾之后，this變成tr，事件冒泡到tbody，然后對(duì)tr進(jìn)行操作。

其實(shí)on的底層是用了addEventListener，所謂的委托，其實(shí)就是借用事件冒泡機(jī)制，而且可以指定event.target和event.currentTarget(==this)來(lái)指定哪個(gè)事件對(duì)象

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡