javascript中的事件代理初探
事件在javascript中一直是最強(qiáng)大的對(duì)象之一。javascript提供了addEventListener和attachEvent兩個(gè)方法來為DOM節(jié)點(diǎn)綁定事件,jquery作了進(jìn)一步封裝,提供了兼容各個(gè)瀏覽器的bind方法?,F(xiàn)在來看,這種傳統(tǒng)的事件綁定方式存在著以下不足:
1.可能需要綁定很多的EventHander。
假如頁(yè)面中某個(gè)表有100行,現(xiàn)在必須為每一行綁定一個(gè)click事件。那么就必須綁定100個(gè)EventHandler,這對(duì)頁(yè)面性能來說有著極大的負(fù)擔(dān),因?yàn)樾枰獎(jiǎng)?chuàng)建更多的內(nèi)存來存放這些Handler。
2.事件無(wú)法綁定后加入的DOM節(jié)點(diǎn)。
假如頁(yè)面中的代碼如下:
$("#dv").bind('click',function(){alert('test');});
$(body).append('<div id="dv">test</div>')
后加入的div是無(wú)法觸發(fā)點(diǎn)擊事件的。
為了解決這兩個(gè)問題,javascript引入了事件代理(event proxy)。首先,我們了解一下js中的冒泡機(jī)制。
基本上所有的瀏覽器都支持事件冒泡。當(dāng)在某個(gè)DOM節(jié)點(diǎn)上觸發(fā)事件上,事件會(huì)一直向上傳遞,一直到文檔的根節(jié)點(diǎn)。既然所有的節(jié)點(diǎn)的事件最終都會(huì)傳遞到文檔根節(jié)點(diǎn),那么我們?nèi)绻苯訉⑹录壎ǖ轿臋n根節(jié)點(diǎn)(document節(jié)點(diǎn)),然后通過event.target來判斷是哪個(gè)節(jié)點(diǎn)觸發(fā)的事件,是不是減少很多EventHandler的綁定呢?
jquery中的live方法正式根據(jù)這個(gè)原理來實(shí)現(xiàn)的,下面我們來實(shí)現(xiàn)一個(gè)live簡(jiǎn)單版:
$.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='<table id="tb"> \
<tr> \
<td>the first column</td>\
<td>the second column</td>\
<td>the third column</td>\
</tr>\
</table>';
$("body").append(tb);
live方法中,事件綁定在document節(jié)點(diǎn)上,$(event.target).closest(that)來匹配真正觸發(fā)事件的元素。demo中,我們?yōu)槊總€(gè)后加入的td都綁定了click事件,單擊不同的td,我們發(fā)現(xiàn)會(huì)彈出他們對(duì)應(yīng)Text的提示框。
live方法彌補(bǔ)了前面提到的傳統(tǒng)事件綁定方法的兩個(gè)不足。但live方法仍存在它的不足之處。看這句代碼:
$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});
它會(huì)首先根據(jù)jquery選擇器遍歷整個(gè)文檔,找到所有的#tb td元素,將他們存儲(chǔ)成對(duì)象。然而,在live的實(shí)現(xiàn)方法中,并沒有利用這些對(duì)象,而僅僅是將"#td td"作為字符串與事件源進(jìn)行匹配而已。這就大大增加了很多無(wú)謂的消耗。
那么有沒有辦法改善這一狀況呢?jquery中提供了delegate代理方法,它支持將事件綁定到指定的元素上,而不僅僅是document上。了解了它的原理,我們來實(shí)現(xiàn)一個(gè)delegate簡(jiǎn)單版:
$(body).append('<div id="dv"></div>');
$.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='<table id="tb"> \
<tr> \
<td>the first column</td>\
<td>the second column</td>\
<td>the third column</td>\
</tr>\
</table>';
$("dv").append(tb);
mydeletage方法不需要獲取所有的td對(duì)象,而僅僅只需要獲取綁定事件的div對(duì)象。這在執(zhí)行效率上要優(yōu)于live方法。
這里僅僅起到一個(gè)拋磚引玉的作用,讓大家了解到事件代理的原理而已,jquery中的live和delegate實(shí)現(xiàn)要復(fù)雜的多。
相關(guān)文章
微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollTab組件,滾動(dòng)選項(xiàng)卡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁(yè)地址的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁(yè)地址的方法,涉及javascript動(dòng)態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04一個(gè)不錯(cuò)的用JavaScript實(shí)現(xiàn)的UBB編碼函數(shù)
一個(gè)不錯(cuò)的用JavaScript實(shí)現(xiàn)的UBB編碼函數(shù)...2007-03-03bootstrap時(shí)間插件daterangepicker使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap時(shí)間插件daterangepicker使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03前端面試知識(shí)點(diǎn)錦集(JavaScript篇)
這篇文章主要為大家分享了前端面試知識(shí)點(diǎn)錦集JavaScript篇,細(xì)致的給出了每個(gè)js面試知識(shí)點(diǎn)的答案,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12