javascript中的事件代理初探_javascript技巧

事件在javascript中一直是最強大的對象之一。javascript提供了addEventListener和attachEvent兩個方法來為DOM節(jié)點綁定事件，jquery作了進一步封裝，提供了兼容各個瀏覽器的bind方法。現(xiàn)在來看，這種傳統(tǒng)的事件綁定方式存在著以下不足：

1.可能需要綁定很多的EventHander。

假如頁面中某個表有100行，現(xiàn)在必須為每一行綁定一個click事件。那么就必須綁定100個EventHandler，這對頁面性能來說有著極大的負擔(dān)，因為需要創(chuàng)建更多的內(nèi)存來存放這些Handler。

2.事件無法綁定后加入的DOM節(jié)點。

假如頁面中的代碼如下：
代碼如下:
$("#dv").bind('click',function(){alert('test');});
$(body).append('test')

后加入的div是無法觸發(fā)點擊事件的。

為了解決這兩個問題，javascript引入了事件代理（event proxy）。首先，我們了解一下js中的冒泡機制。

基本上所有的瀏覽器都支持事件冒泡。當在某個DOM節(jié)點上觸發(fā)事件上，事件會一直向上傳遞，一直到文檔的根節(jié)點。既然所有的節(jié)點的事件最終都會傳遞到文檔根節(jié)點，那么我們?nèi)绻苯訉⑹录壎ǖ轿臋n根節(jié)點（document節(jié)點），然后通過event.target來判斷是哪個節(jié)點觸發(fā)的事件，是不是減少很多EventHandler的綁定呢？

jquery中的live方法正式根據(jù)這個原理來實現(xiàn)的，下面我們來實現(xiàn)一個live簡單版：
代碼如下:
$.fn.mylive=function(eventType,fn){
var that=this.selector;
$(document).bind(eventType,function(event){
var match=$(event.target).closest(that)
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
})
}

$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});

var tb='

\
\
\
\
\
\

the first column

the second column

the third column

';
$("body").append(tb);

live方法中，事件綁定在document節(jié)點上，$(event.target).closest(that)來匹配真正觸發(fā)事件的元素。demo中，我們?yōu)槊總€后加入的td都綁定了click事件，單擊不同的td，我們發(fā)現(xiàn)會彈出他們對應(yīng)Text的提示框。

live方法彌補了前面提到的傳統(tǒng)事件綁定方法的兩個不足。但live方法仍存在它的不足之處。看這句代碼：
代碼如下:
$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});

它會首先根據(jù)jquery選擇器遍歷整個文檔，找到所有的#tb td元素，將他們存儲成對象。然而，在live的實現(xiàn)方法中，并沒有利用這些對象，而僅僅是將"#td td"作為字符串與事件源進行匹配而已。這就大大增加了很多無謂的消耗。

那么有沒有辦法改善這一狀況呢？jquery中提供了delegate代理方法，它支持將事件綁定到指定的元素上，而不僅僅是document上。了解了它的原理，我們來實現(xiàn)一個delegate簡單版：
代碼如下:
$(body).append('');

$.fn.mydelegate=function(selector,eventType,fn){
$(this).bind(eventType,function(event){
var match=$(event.target).closest(selector);
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
});
}

$("#dv").mydelegate('td','click',function(event){
alert(event.target.innerHTML);
});

var tb='

\
\
\
\
\
\

the first column

the second column

the third column

';
$("dv").append(tb);

mydeletage方法不需要獲取所有的td對象，而僅僅只需要獲取綁定事件的div對象。這在執(zhí)行效率上要優(yōu)于live方法。

這里僅僅起到一個拋磚引玉的作用，讓大家了解到事件代理的原理而已，jquery中的live和delegate實現(xiàn)要復(fù)雜的多。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com