DOM事件委托，通俗的说就是：委托一个元素帮我监听我本来监听的事件，一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
事件委托的优点：
-
省监听数(省内存)
-
可以监听动态元素
示例一：你要给 100 个按钮添加点击事件，咋办？ 答：监听这 100 个按钮的祖先，等冒泡的时候判断 target 是不是这 100 个按钮中的一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id=div1>
<button data-id='1'>click 1</button>
<button>click 2</button>
<button>click 3</button>
<button>click 4</button>
...
<button data-id='100'>click 100</button>
</div>
</body>
</html>
div1.addEventListener('click',(e)=>{
const t = e.target
if(t.tagName.toLowerCase()==='botton'){
console.log('button 被点击了')
console.log('button内容是'+t.textContent)
console.log('button data-id 是'+t.dataset.id)
}
})
示例二：你要监听目前不存在的元素的点击事件，咋办？ 答：监听祖先，等点击的时候看看是不是我想要监听的元素即可
...
<div id=div1>
</div>
...
setTimeout(()=>{
const button = document.createElement('botton')
button.textContent = 'click 1'
div1.appendChild(button)
},1000)
div1.addEventListener('click',(e)=>{
const t = e.target
if(t.tagName.toLowerCase()==='button'){
console.log("button 被 click")
}
})
封装事件委托：
- 别人只需要用on事件，就能做到在div1上做事件委托，来看button是否被点击。
on('click','#div1','button',()=>{
console.log('button 被点击了')
})
先搞清楚输入，输入时4个参数：
- 事件类型eventType，比如onlick事件；
- 元素element；
- 选择器seletor，准备匹配什么元素；
- 回调函数fn，比如点击时被调用； 再搞清楚输出， 以下代码即为封装好的事件委托函数：
function on(eventType，element，selector，fn){.
if(!(element instanceof Element)){
element = document.querySelector(element)
}
element.addEventListener(eventType,()=>{
const t = e.target
if(t.matches(seletor)){
fn(e)
}
})
}
