on()、live()、delegate()、bind()的比較
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()的比較