jQuery實(shí)現(xiàn)事件代理
1.事件代理的原理和意義
實(shí)現(xiàn)原理是利用了瀏覽器的事件冒泡和事件源(target)。
在js中事件會冒泡到父級節(jié)點(diǎn),所以我們可以在父級節(jié)點(diǎn)進(jìn)行事件代理。例如一個(gè)使用jQuery的函數(shù):
$("#tab td").click(function(){
$(this).css("background","red");
}) ;
上面的函數(shù)給一個(gè)tab的td加了一個(gè)單擊事件,但是如果表格1000行,就得綁定1000次,
$("#tab").bind("click",function(ev)){
var $obj=$(ev.target);
$obj.css("background","red");
}
以上用bind函數(shù)將click綁定到了tab上闲询,從而實(shí)現(xiàn)事件代理久免。
2.jQuery中的綁定函數(shù)
(1).bind()為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)
$("#niu").bind('click',function(){
alert("hello niuniu");
});
此代碼把id為niu的元素響應(yīng)事件click,并顯示警報(bào)扭弧。使用bind綁定多個(gè)事件時(shí)阎姥,可以這樣
$("#niu").bind('mouseenter mouseleava',function(){
$(this).css("background","yellow");
});
$("#foo").bind({
click:function(){
},
mouseenter:function(){
}
});
(2).delegate()指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)
$("table").delegate("td","click",function(){
$(this).toggleClass("chosen");
});
(3).on在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)
function greet(event) { alert("Hello"+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);
(4).live給所有匹配的元素附加一個(gè)事件處理函數(shù)鸽捻,即使這個(gè)元素是以后再添加進(jìn)來的
$("a").live("click", function() { return false; })
以上是常用的綁定函數(shù)呼巴。
技術(shù)文檔引用:
自從.live()方法處理事件一旦傳播到文檔的頂部,live事件是不可能停止傳播的御蒲。同樣地衣赶,.delegate() 事件將始終傳播給其中包含的被委托元素;同時(shí)厚满,任何在 DOM 樹中府瞄,比這些元素低的元素上綁定的相同事件,在 .delegate() 事件被調(diào)用的時(shí)候碘箍,也會被觸發(fā)遵馆。因此,如果要在事件中阻止委托事件被觸發(fā)敲街,可以調(diào)用event.stopPropagation()或者返回false防止委派處理程序冒泡。
簡單來說严望,.bind()是直接綁定在元素上多艇,而.live()和.delegate()則是通過冒泡的方式來綁定到元素上的。.bind()方法只能給當(dāng)前存在的元素綁定事件像吻,對于事后采用JS方式新生成的元素?zé)o效峻黍,而live方法可以對后生成的元素也可以綁定相應(yīng)的事件。