首頁  >  文章  >  web前端  >  jquery on bind之間有什麼區別

jquery on bind之間有什麼區別

一个新手
一个新手原創
2017-10-07 11:39:521928瀏覽

JQuery從1.7+版本開始,提供了on()和off(),進行事件處理函數的綁定和取消。這2個API與JQuery最初提供的bind()和unbind()有很多相似的地方,也有一些不同之處。 bind和unbind的詳細介紹,可以參考這篇文章。

on()和bind()的函式簽章如下:


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

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

    <p id="parent">  
        <input type="button" value="a" id="a"/>  
        <input type="button" value="b" id="b"/>  
    </p>


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


    $("#parent").on("click","#a",function(){  
        alert($(this).attr("id"));  
    });

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

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

以上是jquery on bind之間有什麼區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn