一般的简单写法是这样的
ul.addEventListener('click',e => {
if(e.target.tagName.toLowerCase() === 'li'){
console.log("li被点击了")
}
})
但是这样做会有个问题,就是如果点击了li的子元素就不会触发事件了,所以我们改写成这样
我们写一个方法,它接受四个参数
- 绑定事件的元素
- 事件类型
- 选择器
- 回调函数
function bindEvents(element,eventType,selector,fn){
element.addEventListener(eventType, e => {
let el = e.target
while(!el.matches(selector)){
if(el === element){
el = null
break
}
el = el.parentNode
}
el && fn.call(el,e,el)
})
return element
}
- 找到被点击的元素
let el = e.target - 不停向上找找到事件元素的父元素,将它和目标元素进行比较
el = el.parentNode -
失败的情况:
如果直到父元素和最外层元素(用来接收事件的元素)相等
el === element
都没有不能和目标选择器匹配
则不触发事件,将el置为null,结束循环
while(!el.matches(selector)){
if(el === element){
el = null
break
}
el = el.parentNode
}
el && fn.call(el,e,el)不执行
