事件委托（Event Delegation）是JS中一項(xiàng)十分重要的應(yīng)用，使用事件委托可以避免對(duì)每一個(gè)節(jié)點(diǎn)添加監(jiān)聽(tīng)器慌随，只要把監(jiān)聽(tīng)器加到它們的父元素上就可以利用冒泡階段來(lái)監(jiān)聽(tīng)子元素的事件垛贤。接下來(lái)我們通過(guò)一段代碼來(lái)理解事件委托的過(guò)程和原理焰坪。
HTML代碼如下：
<style>
li{
border:1px solid blue;
text-align:center;
}
ul{
background-color:rgba(255,0,0,0.5);
padding:20px;
}
</style>
<ul>
<li>小明</li>
<li>小華</li>
<li>小強(qiáng)</li>
<li>小胖</li>
<li>小紅</li>
</ul>
在沒(méi)有添加JS代碼的情況下顯示出來(lái)的效果：
現(xiàn)在要添加JS代碼，從最基礎(chǔ)的來(lái)：
var list = document.querySelectorAll('li')
function fn(){
console.log('OK')
}
list[0].addEventListener('click',fn)
list[1].addEventListener('click',fn)
list[2].addEventListener('click',fn)
list[3].addEventListener('click',fn)
list[4].addEventListener('click',fn)
這段代碼的思路就是聘惦，先用document.querySelectorAll()方法訪問(wèn)到所有的li節(jié)點(diǎn)某饰，并且把這些標(biāo)簽儲(chǔ)存在一個(gè)數(shù)組里，然后訪問(wèn)每個(gè)具體的節(jié)點(diǎn)并且用addEventListener給所有的li節(jié)點(diǎn)添加監(jiān)聽(tīng)器，當(dāng)鼠標(biāo)點(diǎn)擊各個(gè)li時(shí)黔漂，會(huì)觸發(fā)fn函數(shù)并且打出OK字符串诫尽。
但是這樣真的很麻煩呀，而且要有很多重復(fù)的代碼炬守，那么我們可以把JS代碼改成這樣：
var list = document.querySelectorAll('li')
function fn(){
console.log('OK')
}
var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
這一串代碼的意思就是說(shuō)牧嫉，我監(jiān)聽(tīng)了li的父級(jí)元素，如果你點(diǎn)擊了ul就會(huì)觸發(fā)fn函數(shù)减途；同時(shí)酣藻，即使你點(diǎn)擊了li的內(nèi)容，因?yàn)閘i是ul的子無(wú)素鳍置，在冒泡階段辽剧，fn函數(shù)依然會(huì)被觸發(fā)。
但是這里有一個(gè)問(wèn)題税产，我想只點(diǎn)擊那幾個(gè)li不點(diǎn)擊ul就能觸發(fā)事件怕轿，就像最早的那個(gè)代碼一樣，那我們就可以在fn函數(shù)里加點(diǎn)條件砖第。JS代碼修改如下：
var list = document.querySelectorAll('li')
function fn(e){
if(e.target.tagName ==='LI')
console.log('OK')
}
var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
相對(duì)于之前的代碼撤卢，這個(gè)代碼在fn函數(shù)里增加了一件if條件來(lái)篩選，使用瀏覽器默認(rèn)e參數(shù)梧兼，如果e.target（你點(diǎn)擊的元素）的tagName是li的話，就打出OK字符串智听，如果不是的話就不打出來(lái)羽杰，這樣的效果就和之前那個(gè)麻煩的代碼一樣了，而且還精簡(jiǎn)了一些到推。注意：tagName的返回值是大寫的考赛，之前被坑過(guò)。
但是寫到這里又有新問(wèn)題出現(xiàn)了233333莉测，如果我點(diǎn)擊的HTML代碼里li元素里還有其它的子元素呢怎么辦呢颜骤？比如說(shuō)在第一個(gè)li元素里有一個(gè)span標(biāo)簽？新的HTML的代碼如下：
<style>
li{
border:1px solid blue;
text-align:center;
}
ul{
background-color:rgba(255,0,0,0.5);
padding:20px;
}
</style>
<ul>
<li><span>小明</span></li>
<li>小華</li>
<li>小強(qiáng)</li>
<li>小胖</li>
<li>小紅</li>
</ul>
這一部分的HTML/CSS代碼和之前的有差異捣卤，在第一個(gè)li里放入了一個(gè)span標(biāo)簽把小明又往里包了一層忍抽。如果按照上面JS代碼進(jìn)行運(yùn)行的話，因?yàn)閕f條件判斷句限制了當(dāng)前點(diǎn)擊的元素必須是li所以當(dāng)我點(diǎn)擊了處于span標(biāo)簽里的小明董朝，事件就監(jiān)聽(tīng)不到了鸠项。
哎~??????我聽(tīng)見(jiàn)了心碎的聲音233333。寫到這里子姜，還得繼續(xù)想辦法祟绊，既然我點(diǎn)擊了span里面的小明無(wú)法觸發(fā)事件，但是包住小明的span標(biāo)簽的爸爸是li啊，它是可以觸發(fā)的啊牧抽，那是不是只要我想辦法讓點(diǎn)擊的元素是li或者它的爸爸是li不就行了嗎嘉熊？？?好扬舒，我們繼續(xù)寫记舆，新的JS代碼如下：
var list = document.querySelectorAll('li')
function fn(e){
if(e.target.tagName ==='LI' || e.target.parentNode.tagName ==='LI')
console.log('OK')
}
var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
這一段JS代碼相對(duì)于上面的變化的地方在于fn函數(shù)的if條件句中額外增加了一個(gè)‘或者’的邏輯運(yùn)算符，意思就是說(shuō)呼巴，如果我點(diǎn)擊的元素是li或者我點(diǎn)擊的元素的爸爸是li的話都可以打出OK字符串泽腮。這樣的話問(wèn)題就算是解決了。
但是衣赶，怕就怕在這個(gè)但是≌锷蓿現(xiàn)在的小明處于span標(biāo)簽里，span標(biāo)簽只有爸爸（li標(biāo)簽）府瞄，但是如果span還有爺爺呢碧磅，還有爺爺?shù)陌职趾蜖敔數(shù)臓敔斈兀窟@怎么辦遵馆，總不能給span的所有祖先都增加一個(gè)或者條件吧鲸郊？這還不坑死？那就只能繼續(xù)改：
var list = document.querySelectorAll('li')
function fn(e){
var el = e.target
while(el.tagName !== 'LI'){
el = el.parentNode
}
console.log(el)
}
var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
改完以后的代碼就稍等有點(diǎn)繞了货邓。這里的代碼相對(duì)于前面的代碼它添加了一個(gè)while循環(huán)秆撮。大致思路就是，我先聲明一個(gè)變量el换况，然后把點(diǎn)擊的元素（e.target）賦值給el职辨，然后啟用一個(gè)while循環(huán)，當(dāng)el的tagName不是li的時(shí)候戈二，就把el的父級(jí)元素重新賦值給el再進(jìn)行檢查舒裤，只要el的tagName是li了，那就跳出這個(gè)循環(huán)觉吭，執(zhí)行console.log(el)把el打出來(lái)腾供。
好像是皆大歡喜了，可是鲜滩，可是伴鳖。。绒北。新的JS代碼是基于一個(gè)基本前提的：那就是你點(diǎn)擊的元素往上找祖先元素是一定可以找到li的黎侈，但是在實(shí)際操作中，我們所點(diǎn)擊的元素的祖先元素是極有可能不是li的闷游，那怎么辦峻汉？總不能一直在while循環(huán)里跑吧贴汪，即使在while循環(huán)里跑，總會(huì)跑到body和document的休吠，再往上好像就返回null了扳埂。
為了模擬這種情況，我們就要改一下HTML/CSS代碼了瘤礁。
<style>
li{
border:1px solid blue;
text-align:center;
}
ul{
background-color:rgba(255,0,0,0.5);
padding:20px;
}
div{
background-color:green;
}
</style>
<ul>
<li><span>小明</span></li>
<li>小華</li>
<li>小強(qiáng)</li>
<li>小胖</li>
<li>小紅</li>
</ul>
<div><span>班長(zhǎng)大人</span></div>
頁(yè)面效果如下：
新的HTML代碼增加了一個(gè)div阳懂，里面有一個(gè)兒子元素span。如果按照最新的邏輯寫出來(lái)的JS代碼如下：
var list = document.querySelectorAll('li')
function fn(e){
var el = e.target
while(el.tagName !== 'LI'){
el = el.parentNode
console.log(el)
}
console.log(el)
}
var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
var div = document.querySelector('div')
div.addEventListener('click',fn)
但是在點(diǎn)擊了班長(zhǎng)大人以后在瀏覽器里運(yùn)行的結(jié)果就悲劇了：
瀏覽器最后返回了一個(gè)null柜思，為啥呀岩调？因?yàn)樵赿iv里壓根就沒(méi)有什么li元素，所以按照代碼赡盘，瀏覽器一直往上找找到了document都沒(méi)有找到就只好返回一個(gè)null了号枕。有點(diǎn)冏冏冏~
所以還要繼續(xù)改JS代碼：
var list = document.querySelectorAll('li')
function fn(e){
var el = e.target
while(el.tagName !== 'LI'){
el = el.parentNode
if(el.tagName === 'BODY'){
el = null
break;
}
}
if(el){
console.log('你點(diǎn)擊了li')
}else{
console.log('你沒(méi)有點(diǎn)擊li')
}
}
var ul = document.querySelector('ul')
ul.addEventListener('click',fn)
var div = document.querySelector('div')
div.addEventListener('click',fn)
這部分JS代碼的意思就是說(shuō)，如果你往上找到了body元素那就得了別再找往上找了陨享，直接把el置空然后跳出循環(huán)吧葱淳。
寫到這里，終于寫完了抛姑，也寫不動(dòng)了赞厕。最后來(lái)梳理一下這個(gè)JS代碼吧。先看最下面的兩段定硝，分別取到了ul和div皿桑，再對(duì)它們進(jìn)行監(jiān)聽(tīng)。當(dāng)這ul和div以及它們的子元素被點(diǎn)擊時(shí)（冒泡階段）喷斋，就會(huì)觸發(fā)fn函數(shù)唁毒。
接下來(lái)看fn函數(shù)中的內(nèi)容。先聲明一個(gè)el星爪，然后把當(dāng)前點(diǎn)擊的元素賦值給它，在接下來(lái)的while循環(huán)中粉私，如果el的tagName不是li就找到它的爸爸再把它給el顽腾，如果它的爸爸是body的話就直接置空然后跳出循環(huán)。
以上的內(nèi)容為饑人谷直播十一班第二十一課事件委托部分的筆記诺核，我實(shí)際上就把它用自己的話再講一遍而已抄肖。
完。
