JQuery事件綁定函數:on()與bind()的差別

JQuery事件綁定函數:on()與bind()的差別

JQuery

JQuery從1.7+版本開始,提供了on()和off(),進行事件處理函數的綁定和取消。這2個API與JQuery最初提供的bind()和unbind()有很多相似的地方,也有一些不同之處。具體區別可以見W3C參考手冊

on()和bind()的函數簽名:

bind(type, [data], fn)

on(type,[selector],[data],fn)

可以看到2個函數的區別在於:

是否支持selector這個參數值。由於javascript的事件冒泡特性,如果我們在父元素上註冊了一個事件處理函數,當子元素上發生這個事件的時候,父元素上的事件處理函數也會被觸發。如果使用on的時候,不設置selector,那麼on與bind就沒有區別了。

<divid>

上面這段代碼,如果我們使用bind()在parent上綁定了click事件處理函數,當點擊a或者b按鈕的時候,都會執行事件處理函數。如果我們希望點擊a的時候觸發,點擊b的時候不觸發,那麼可以使用on,代碼如下:

$("#parent").on("click","#a",function(){

alert($(this).attr("id"));

});

可以看到:on()函數的參數selector就是為了在事件冒泡的時候,讓父元素能夠過濾掉子元素上發生的事件。如果使用了bind,那麼就沒有這個能力,子元素上發生的事件一定會觸發父元素事件。

還有一點需要注意:

on綁定的事件處理函數,對於未來新增的元素一樣可以,和delegate效果相同,而bind則不行。


本文僅為學習交流所用,如有錯疏,還望指正。喜歡本文可以收藏,或者點個關注,每天都有新鮮技術分享!


分享到:


相關文章: