關於jQuery新的事件繫結機制on 的使用技巧

關於jquery新的事件繫結機制on()的使用技巧

本篇文章介紹了，關於jquery新的事件繫結機制on()的使用技巧。需要的朋友參考下

今天瀏覽jquery的deprecated列表，發現live()和die()在裡面了，趕緊看了一下，發現從jquery1.7開始，jquery引入了全新的事件繫結機制，on()和off()兩個函式統一處理事件繫結。因為在此之前有bind(), live(), delegate()等方法來處理事件繫結，jquery從效能優化以及方式統一方面考慮決定推出新的函式來統一事件繫結方法並且替換掉以前的方法。

1on(events,[selector],[data],fn)

events:乙個或多個用空格分隔的事件型別和可選的命名空間，如"click"或"keydown.myplugin" 。

selector:乙個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發。

data:當乙個事件被觸發時要傳遞event.data給事件處理函式。

fn:該事件被觸發時執行的函式。 false 值也可以做乙個函式的簡寫，返回false。

替換bind()

當第二個引數'selector'為null時，on()和bind()其實在用法上基本上沒有任何區別了，所以我們可以認為on()只是比bind()多了乙個可選的'selector'引數，所以on()可以非常方便的換掉bind()

替換live()live()寫法 12

3$('#list li').live('click','#list li',function() );

on()寫法12

3$(document).on('click','#list li',function() );

這裡的關鍵就是第二個引數'selector'在起作用了。它是乙個過濾器的作用，只有被選中元素的後代元素才會觸發事件。

替換delegate()

delegate()是1.4引入的，目的是通過祖先元素來**委派後代元素的事件繫結問題，某種程度上和live()優點相似。只不過live()是通過document元素委派，而delegate則可以是任意的祖先節點。使用on()實現**的寫法和delegate()基本一致。

delegate()的寫法12

3$('#list').delegate('li','click',function() );

on()寫法12

3$('#list').on('click','li',function() );

貌似第乙個和第二個引數的順序顛倒了一下，別的基本一樣。

總結jquery推出on()的目的有2個，一是為了統一介面，二是為了提高效能，所以從現在開始用on()替換bind(), live(), delegate吧。尤其是不要再用live()了，因為它已經處於不推薦使用列表了，隨時會被乾掉。如果只繫結一次事件，那接著用one()吧，這個沒有變化。

另外使用bind繫結的事件，用unbind解除繫結

使用delegate繫結的事件，用undelegate解除繫結

使用on繫結的事件，用off解除繫結

關於jQuery新的事件繫結機制on 的使用技巧

關於jQuery新的事件繫結機制on 的使用技巧

jQuery新的事件繫結機制on

jQuery新的事件繫結機制on

相關推薦