封装一个通用的事件监听函数,可实现普通的事件监听,也可实现事件委托(事件代理)
function bindEvent(el, type, selector, fn) {
// 如果第四个参数不存在,则第三个参数就是fn
if (!fn) {
fn = selector
selector = ''
}
// 普通的事件监听
if (!selector) {
el.addEventListener(type, fn)
return
}
// 事件委托
el.addEventListener(type, event => {
let element = event.target
// 点击的元素是否匹配期望的选择器
while (!element.matches(selector)) {
if (element === el) {
element = null
break
}
element = element.parentNode
}
element && fn.call(element, event, element)
})
}
var beginButton = document.querySelector('.begin')
var body = document.body
// 普通点击事件
bindEvent(beginButton, 'click', e => {
e.stopPropagation()
console.log(e.currentTarget)
})
// 事件委托
bindEvent(body, 'click', '.stop', e => {
console.log(e.target)
console.log(e.currentTarget)
})
网友评论