简单说明一下事件委托的概念
1.概念
- 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托。
2.优点
-
假如有多个子节点需要监听，那利用事件委托可以省监听点（内存）
-
可以监听动态元素（比如该元素还未出现就需要写监听函数）
3.案例
1.假如要给100个按钮添加点击事件
代码如下
/*
html代码如下
<body>
<div id="div1">
<span>span1</span>
<button>click 1</button>
...*100
</div>
</body>
*/
div1.addEventListener('click',(e)=>{
const t = e.target //把用户操作的元素添加到我的变量里
if(t.tagName.toLowerCase() === 'button'){ // 如果标签名为button
console.log('button 被点击了')
}
})
结果
2.假如要监听目前不存在的元素的点击事件
代码如下
/*
html代码如下
<body>
<div id="div1"></div>
</body>
*/
setTimeout(()=>{
const button = document.createElement('button')
button.textContent='click1'
div1.appendChild(button)
},1000)
on('click','#div1','button',()=>{
console.log('button被点击了')
})
function on(eventType,element,selector,fn){
if(!(element instanceof Element)){
element = document.querySelector(element)
}
element.addEventListener(eventType,(e)=>{
const t = e.target
if(t.matches(selector)){
fn(e)
}
})
}
结果
