前言
在問題前怔毛，需要先清楚關(guān)于事件冒泡、事件代理的定義
事件冒泡
基于DOM樹形結(jié)構(gòu)
事件順著觸發(fā)元素往上冒泡
應(yīng)用場景：事件代理
事件代理
原理： 事件冒泡機(jī)制
實(shí)現(xiàn)方式：可用addEventListener(); //所有主流瀏覽器腾降，除了IE8及更早IE版本拣度。
特點(diǎn)：
代碼簡潔，把事件處理器添加到一個(gè)父級元素上螃壤，避免了把事件處理器添加到多個(gè)子級元素上抗果。
大量減少內(nèi)存占用， 減少事件注冊奸晴。
適用新增元素實(shí)現(xiàn)動態(tài)綁定事件冤馏。
具體實(shí)現(xiàn)如下：
DOM節(jié)點(diǎn)：
<div id="div3">
<a href="#">a1</a><br>
<a href="#">a2</a><br>
<a href="#">a3</a><br>
<a href="#">a4</a><br>
<button>加載更多...</button>
</div>
實(shí)現(xiàn)邏輯：
給每個(gè)a標(biāo)簽添加點(diǎn)擊事件
//事件綁定方法
function bindEvent(elem,type,fn) {
elem.addEventListener(type,fn)
}
//獲取父級元素
const div3=document.getElementById('div3')
給父級元素添加綁定事件
bindEvent(div3,'click',event=>{
event.preventDefault();
const target=event.target
//通過event.target判斷是否是a標(biāo)簽
if (target.nodeName == 'A') {
//給符合要求的元素添加事件
alert(target.innerHTML)
}
})
綜上所述實(shí)現(xiàn)原理：
Step1.給父級元素添加事件代理
Step2.通過event.target判斷是否是當(dāng)前需要綁定的元素
Step3.觸發(fā)元素
