1. 程式人生 > >JQuery的click、bind、delegate、off、unbind

JQuery的click、bind、delegate、off、unbind

增加 方法 over -s dom 希望 空間 live 效果

.click與.bind

  .click和.bind都是給每個元素綁定事件,對於只綁定一個click事件,.bind事件的簡寫就是.click那種方式。

  這兩種方式都會出現兩個問題:

  第一個問題,如果要綁定的事件特別多,比如要綁定100個元素,要綁定100次,對於大量元素來說,影響到了性能。但是如果是id選擇器,因為id唯一,用bind()方法就很快捷了。
  第二個問題,對於尚未存在的元素,無法綁定。動態添加一個span元素,點擊這個span元素,會發現沒有動作響應。

  那麽你就會問,為什麽要出現.bind()這個事件呢?

  .bind()可以一次添加多個事件。

技術分享圖片

  你給一個元素一次性添加了好多事件,.unbind()事件解綁,可以有選擇性的解綁。

  比如說,一個按鈕,你點擊後他要提交到後臺等返回結果是,你不希望它能夠再次被點擊,但是它的其他效果還有,你就需要解綁。

技術分享圖片

  還可以給綁定的事件起名字.bind("mouseover.plugin" function(){})

  解綁的時候 unbind(".plugin");

  unbind("mouseover!")加!的是匹配所有不含命名空間的mouseover事件

.click和.bind 與.delegate

技術分享圖片

  這個效果和普通綁定事件和on委托事件效果一樣.

  這種方式采用了事件委托的概念。不是直接為btn3元素綁定事件,而是為其父元素(或祖先元素也可)綁定事件,當在父元素內任意元素上點擊時,事件會一層層從event target向上冒泡,直至到達你為其綁定事件的元素。冒泡的過程中,如果事件的currentTarget與選擇器匹配時,就會執行代碼。

  這樣就解決了用。click(),bind()方法的上面兩個問題,不用再一個個地去為btn元素綁定事件,也可以為動態添加進來的btn元素綁定。甚至,如果你將事件綁定到document上,都不用等document準備好就可執行綁定。

  這樣,綁定是容易了,但是調用的時候也可能出現問題。如果事件目標在DOM樹中很深的位置,這樣一層層冒泡上來查找與選擇器匹配的元素,又影響到性能了。

  .bind 與.delegate都可以同時綁定多個事件。

.delegat與.on

  這兩個函數實現的效果是一樣的,以前沒有開放on,只有bind,click,live,delagate,他們都是通過on實現的,後面把live刪了,把on直接開放出來用。但是為什麽不把.delegate也刪掉,就不知道了,知道的可以告訴我。

.delegate和.on還是有一些細微的區別的:

技術分享圖片

  參數的位置不太一樣。

對於他們的解綁/解除委托

技術分享圖片

  click和bind用unbind解綁,delegate和on的都是相應的解除委托,假如你要直接解綁一個元素的一個事件,那麽你就用id選擇器好了~,對一個單獨元素這樣解除委托不可以哦!

技術分享圖片

  這樣用類解除委托

技術分享圖片

總結:

  ①選擇器匹配到較多元素時,不用click和bind,用delegate和on,增加效率並且可動態添加元素。註意dom樹不要太深,父元素選擇得當。Jq版本要高

  ②選擇器匹配的元素少時,可以用click和bind。 Jq低版本支持

綜上所述呢,目前用on就對了。

JQuery的click、bind、delegate、off、unbind