1. 程式人生 > >on()、live()、delegate()、bind()的比較

on()、live()、delegate()、bind()的比較

red light pan leg strong 但是 delegate 當前 nts

bind(type,[data],fn) 為每個匹配元素的特定事件綁定事件處理函數(只對靜態有效)。

$("a").bind("click",function(){alert("ok");});

live(type,[data],fn) 給所有匹配的元素附加一個事件處理函數,即使這個元素是以後再添加進來的

$("a").live("click",function(){alert("ok");});

delegate(selector,[type],[data],fn) 指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。使用 delegate() 方法的事件處理程序適用於當前或未來的元素(比如由腳本創建的新元素)。

當點擊鼠標時,隱藏或顯示 p 元素:

HTML 代碼:
1 <div style="background-color:red">
2 <p>這是一個段落。</p>
3 <button>請點擊這裏</button>
4 </div>

jQuery 代碼:

1 <div style="background-color:red">
2 <p>這是一個段落。</p>
3 <button>請點擊這裏</button>
4 </div>

描述: delegate這個方法可作為live()方法的替代,使得每次事件綁定到特定的DOM元素。

以下兩段代碼是等同的:
 1 $("table").delegate("td", "hover", function(){  $(this).toggleClass("hover");  }); 
1 $("table").each(function(){
2     $("td", this).live("hover", function(){
3           $(this).toggleClass("hover");
4     });
5     
6 });

on(events,[selector],[data],fn) 在選擇元素上綁定一個或多個事件的事件處理函數。on()方法綁定事件處理程序到當前選定的jQuery對象中的元素

jQuery使用on()綁定動態生成元素的事件無效的問題

jQuery的on()方法可以綁定動態生成元素的事件,但是在實際使用時發現無效。如下HTML:

1 <p>
2 <a>123</a>
3 </p>

使用如下方式,對靜態元素有效,但是綁定動態生成的a元素的事件時無效:

$(‘a‘).on(‘mouseenter‘, function(){ ............});

需要綁定a的父級元素(此元素必須為靜態元素,不是後來動態生成的),然後設定on()方法的selector參數才行:

$(‘p‘).on(‘mouseenter‘, ‘a‘, function(){ ..............});

差別:

.bind()是直接綁定在元素上

.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的,綁定到document DOM節點上。和.bind()的優勢是支持動態數據。

.delegate()則是更精確的小範圍使用事件代理,性能優於.live()

.on()則是最新的1.7版本整合了之前的三種方式的新事件綁定機制

type: 含有一個或多個事件類型的字符串,由空格分隔多個事件。比如"click"或"submit",還可以是自定義事件名。

events:一個或多個用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。

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

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

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

on()、live()、delegate()、bind()的比較