簡單情況的事件代理寫法
假設(shè)是這個么結(jié)構(gòu)肪虎，然后現(xiàn)在要監(jiān)聽的是 父容器 ul :
<ul class="parent">
灰色的是父容器 ul ，白色區(qū)域是 子元素 li
<li class="child">child 1</li>
<li class="child">child 2</li>
<li class="child">child 3</li>
<li class="child">child 4</li>
</ul>
那么我們的監(jiān)聽代碼可以這么寫：
let parent = document.querySelector('.parent')
parent.addEventListener('click',handler)
function handler(e) {
/* if(e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText)
}
*/
if(e.target.matches('li')) {
console.log(e.target.innerText)
}
}
點擊這里 預(yù)覽
比較稍復(fù)雜的情況 ---- 遞歸
<div id="result">
假設(shè)現(xiàn)在要監(jiān)聽的是child 元素飒箭，但是監(jiān)聽器綁定在 result容器上
<ul class="parent">
<li class="child">
<a href="#">child 1</a>
<span>1 </span>
</li>
<li class="child">
<a href="#">child 2</a>
<span>2</span>
</li>
<li class="child">
<a href="#"> child 3 </a>
<span>3 </span>
</li>
<li class="child">
<a href="#"> child 4 </a>
<span> 4 </span>
</li>
</ul>
</div>
監(jiān)聽代碼：
let result = document.getElementById('result')
result.addEventListener('click',handler)
function handler(e) {
let target = e.target;
while(target !== result){
if(target.tagName.toLowerCase() === 'li'){
console.log(target.innerText);
break;
}
target = target.parentNode;
}
}
點擊這里 預(yù)覽
