on方法繫結事件

2021-07-22 05:59:14 字數 1443 閱讀 9967

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

on(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()寫法

複製**

**如下:

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

on()寫法

複製**

**如下:

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

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

替換delegate()

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

delegate()的寫法

複製**

**如下:

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

on()寫法

複製**

**如下:

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

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

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

JqueryOn繫結事件方法介紹

1.簡介 1 on 方法在被選及子元素上新增乙個或多個事件處理程式 2 在jquery 版本1.7起,on 方法是bind live 和delegate 方法的新的替代品,該方法給api帶來很多便利,簡化了jquery 庫。3 使用on 方法新增的事件處理程式適用於當前及未來的元素 比如由指令碼建立...

對元素繫結事件方法

1 對元素繫結事件的方法不止一種,live 1.9後版本不支援 bind,on,delegate。2 多數時候使用on繫結事件。p on click function 3 對於動態建立的元素繫結事件。document on click bind p function 上面這種是使用on繫結事件,另一...

jq繫結事件的方法區別

jquery中用on來繫結事件,經常的寫法有 document on click classname function classname on click function 上面兩種都是給類是classname的元素新增了click事件,那這兩個寫法有什麼區別呢?在效率上哪個更好呢?documen...