JQuery的click、bind、delegate、off、unbind

標籤：span   為什麼   低版本   bind   strong   命名   function   實現   技術   

.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