js事件委托也叫事件代理
2020/11/13 12:00:58 閱讀：2853
發(fā)布者：2853
事件委托也叫事件代理，簡(jiǎn)單點(diǎn)說(shuō)就是，把事件綁定到父級(jí)上，監(jiān)聽(tīng)子元素的冒泡事件
在利用事件委托的時(shí)候，我們還必須要知道一個(gè)概念：事件對(duì)象下的事件源
事件源：在事件中，當(dāng)前操作的那個(gè)元素就是事件源。比如我們點(diǎn)擊a標(biāo)簽發(fā)生onclick事件時(shí)，事件源就是a標(biāo)簽，當(dāng)點(diǎn)擊li發(fā)生onclick事件時(shí)，那么事件源就是li
window.onload = function(){
var oUl = document.getElementById('ull');
var aLi = document.getElementsByTagName('li'); //獲取所有列
for(var i =0;i < aLi.length;i++){
aLi[i].onmouseover = function(){ this.style.background = "red"; }
}
當(dāng)然這樣一看代碼也沒(méi)什么問(wèn)題，通過(guò)循環(huán)給每個(gè)li加事件，但想一想如果我們有很多個(gè)li,是不是要加很多次事件，這樣其實(shí)是非常耗性能的。那么我們會(huì)想，能不能只加一個(gè)事件就能實(shí)現(xiàn)呢。當(dāng)然是能的，不然我就不會(huì)在這扯了。
那就是通過(guò)冒泡原理進(jìn)行事件委托，我們可以把事件只加給父級(jí)oUL,這樣不管移入哪個(gè)li,都會(huì)觸發(fā)父級(jí)的移入事件，（對(duì)冒泡不太理解的，可以參考我的JS冒泡的文章），但這個(gè)時(shí)候也有個(gè)問(wèn)題，因?yàn)槲业男枨笫牵寣?duì)應(yīng)的li變顏色，不是讓整個(gè)列表變，它怎么知道我鼠標(biāo)移入的是哪個(gè)LI，這個(gè)時(shí)候萬(wàn)能的事件對(duì)象中的一個(gè)屬性就要出場(chǎng)了，就是事件源 (不管事件綁定在那個(gè)元素中 都指的是實(shí)際觸發(fā)事件的那個(gè)的目標(biāo))，就是能獲取到你當(dāng)前鼠標(biāo)所在的LI，
不過(guò)這個(gè)有兼容性問(wèn)題， IE和標(biāo)準(zhǔn)下不同，標(biāo)準(zhǔn)指的就是比較新版本的那些瀏覽器了
IE：window.event.srcElement
標(biāo)準(zhǔn)：event.target
所以需要做下兼容，也很簡(jiǎn)單。
window.onload = function(){
var oUl = document.getElementById('ull');
var aLi = document.getElementsByTagName('li');
oUl.onmouseover = function(ev){
var event = ev||window.event; // 獲取event對(duì)象
var target = ev.target || ev.srcElement; // 獲取觸發(fā)事件的目標(biāo)對(duì)象
if(target.nodeName.toLowerCase() == 'li'){ //判斷目標(biāo)對(duì)象是不是li
target.style.background = 'red';
}
}
代碼中加了一個(gè)標(biāo)簽名的判斷，主要原因是如果不加判斷，當(dāng)你鼠標(biāo)移入到父級(jí)oUL上面的時(shí)候，整個(gè)列表就會(huì)變紅，這不是我們想要的結(jié)果，所以要判斷一下。
target.nodeName 彈出的名字是大寫(xiě)的，所以需要轉(zhuǎn)換大小寫(xiě)再比較。
其實(shí)事件委托還有第二個(gè)優(yōu)點(diǎn)：就是新添加的元素還會(huì)有之前的事件
假定我們又有一個(gè)需求，點(diǎn)擊某個(gè)按鈕，可以在列表中再創(chuàng)建一個(gè)li,這個(gè)時(shí)候一般方法，因?yàn)樾聞?chuàng)建的li沒(méi)有加事件，所以是不具備移入變紅的功能的，但是用事件委托的方法，新的li,同樣有這個(gè)事件。原理也很容易相同，因?yàn)槭录羌釉诟赣H上面的，父親在，事件在
