JQuery的click、bind、delegate、off、unbind
.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