JS基础总结 - 事件委托和事件绑定函数
1. 事件绑定
1.1 示例：
const div1 = document.getElementById('div1')
div1.addEventListener('click', e => {
console.log('clicked')
})
1.2 事件绑定函数
在实际开发中，经常需要为元素绑定事件。因此可以将事件绑定的代码封装成一个通用的事件绑定函数。（如下 ↓）
// 事件绑定函数1.0版 （不支持事件代理）
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
// 测试
const btn = document.getElementById('btn1')
bindEvent(btn, 'click', e => {
// console.log(e.target) // 获取触发的元素
// e.preventDefault() // 阻止默认行为
// e.stopPropagation() // 阻止事件冒泡
console.log('clicked')
})
2. 事件委托 / 代理
利用事件的冒泡机制，我们可以在父级元素上绑定事件，从而监听子元素上冒泡上来的事件。
2.1 示例
const div1 = document.getElementById('div1')
div1.addEventListener('click', e => {
const target = e.target
if (target.nodeName === 'A') {
console.log(target.innerHTML)
}
})
2.2 事件委托的优点
- 代码更简洁。
- 性能更好。只绑定一次事件，减少内存的使用。
2.3 改写事件绑定函数（兼容事件委托）
// 事件绑定函数2.0 （支持事件代理）
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, e => {
const target = e.target
if (selector) { // 代理绑定
if (target.matches(selector)) { // 元素能否被指定的选择器字符串选择
fn.call(target, e)
}
} else { // 普通绑定
fn.call(target, e)
}
})
}
// 测试
const div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e) {
e.preventDefault()
alert(this.innerHTML)
})
