事件在javascript中一直是最強大的物件之一。 javascript提供了addEventListener和attachEvent兩個方法來為DOM節點綁定事件,jquery作了進一步封裝,提供了相容各個瀏覽器的bind方法。現在來看,這種傳統的事件綁定方式存在著以下不足:
1.可能需要綁定很多的EventHander。
假如頁面中某個表有100行,現在必須為每一行綁定一個click事件。那麼就必須綁定100個EventHandler,這對頁面效能來說有著極大的負擔,因為需要創建更多的記憶體來存放這些Handler。
2.事件無法綁定後加入的DOM節點。
假如頁面中的程式碼如下:
$(body).append('
後加入的div是無法觸發點擊事件的。
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);
});
$.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 |
mydeletage方法不需要取得所有的td對象,而只需要取得綁定事件的div對象。這在執行效率上要優於live方法。
這裡僅僅起到一個拋磚引玉的作用,讓大家了解到事件代理的原理而已,jquery中的live和delegate實現要復雜的多。