jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate


.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委托事件效果一樣.(我之前寫的http://www.cnblogs.com/wufangfang/p/5333007.html)

 

這種方式采用了事件委托的概念。不是直接為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還是有一些細微的區別的:

 

參數的位置不太一樣。

 

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

 

對於這里的handler是啥?

 

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

 

這樣用類解除委托

 

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

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM