一、原理
不是每个子节点单独设置事件监听器,而是事件监听在其父亲节点上,必须利用冒泡原理影响设置每个节点
二、例子
场景1
你要给100个按钮做监听事件,咋办?
场景2
你要监听目前不存在的元素的事件,咋办?
<!DOCTYPE>
<html>
<head>
<meta charset='UTF-8'>
<title>事件委托</title>
<head>
<body>
<div class='max'>
<button class='btn-1'>btn1</button>
<button class='btn-2'>btn2</button>
<button class='btn-3'>btn3</button>
.
. (省略96个button)
.
<button class='btn-100'>btn100</button>
</div>
<script>
/* 监听祖先元素 */
let btn_max=document.querySelector('.max');
btn_max.addEventListener('click',()=>{
const t = e.target; //为了保存e.target对象,因为它是一个异步的结果,点击后e.target对象就会消失。
if(e.tagName.toLowerCase()==='button'){
console.log('button被点击了');
console.log('被点击的button是'+ t.className); //这样就能知道点击了哪一个button
}
})
</script>
</body>
<html>