封装事件委托
要求：写出这样一个函数on(‘click’, ‘#testDiv’, ‘li’, fn)
注意：先搞清楚输入(封装的四个参数，事件绑定、元素选择器 Element.matches 、事件 event 对象，某些函数)在搞清楚输出
当用户点击#testDiv里的li元素时,调用fn函数
要求用到事件委托
答案一
判断target是否匹配’li’等选择器，
<body>
<div id="div1">
</div>
</body>
setTimeout(()=>{
const button =document.createElement('button')
button.textContent = 'click 1'
div1.appendChild(button)
},1000)
//产生一个button,button内容,把button放到div1里面
on('click' , '#div1', 'button',()=>{
console.log('button 被点击了')
})
//封装好的事件委托函数
//先搞清楚输入(封装的四个参数，这里分别是事件类型，元素，选择器,回调函数)在搞清楚输出
function on(eventType, element,selector, fn){
if(!(element instanceof Element)){
//如果这个element不是一个Element(元素)，就找
element = document.querySelector(element)
}
element.addEventListener(eventType,(e)=>{
const t=e.target
if(t.matches(selector)){
fn(e)
}
})
}//matches用来判断一个元素是否满足选择器，matches匹配的意思
答案二
递归判断target / target的爸爸/target的爷爷。(当前元素不匹配button就看他的爸爸匹配不，只要我的祖先中某一项是button，说明点击的就是button)
<body>
<div id="div1">
</div>
</body>
setTimeout(()=>{
const button =document.createElement('button')
button.textContent = 'click 1'
div1.appendChild(button)
},1000)
//产生一个button,button内容,把button放到div1里面
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 => {
let el = e.target
//看被操作的元素是否不符合选择器button
while (!el.matches(selector)) {
if (element === el) {
//发现当前元素等于第二个参数div1时，找不到了，不能超过div1
el = null
break
}
el = el.parentNode
//符合被操作的元素等于它的爸爸
}
el && fn.call(el, e, el)
//如果我找了一个爸爸是匹配这个选择器的，就算是成立了，调用fn，传this，第一个参数传e，第二个参数传匹配的元素
})
return element
}
整合进自己的jQuery
有兴趣可以自己实现$(’#xxx’).on(‘click’, ‘li’, fn)试试看~
JS支持事件吗
答
不支持。本次讲的DOM事件不属于JS的功能，是浏览器提供的 DOM的功能
JS只是调用了DOM提供的addEventListener而已
优点
1.减少内存消耗（省监听数）
例如：
你要给100个按钮添加点击事件，咋办？
如果给每个按钮添加点击事件，那对于内存消耗是非常大的，效率上需要消耗很多性能；
因此，我们可以监听这100个按钮的父层元素，等冒泡的时候判断target是不是这100个按钮中的一个；
所以事件委托可以减少大量的内存消耗，节约效率。
2.可以监听动态元素
例如：
你要监听目前不存在的元素的点击事件，咋办？
答：监听祖先，等点击的时候看看是不是我想要监听的元素即可。
