原理实现
此函数能够满足普通事件绑定和事件代理,什么是事件代理?因为DOM树形结构的原因,js绑定事件会触发冒泡机制,既在不阻止冒泡的情况下,会触发父元素绑定的事件,因此可以利用此机制来实现事件代理,父节点绑定事件,子节点(e.target
)触发,这样可以减少代码量,使结构更加清晰。
代码实现
/**
* @deprecated 通用事件监听(支持代理)函数
* @param {String} elem 需要被监听的dom节点
* @param {String} type 事件类型
* @param {String} selector 需要触发代理的dom节点
* @param {Function} fn 回调函数
*/
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function (e) {
var target
if (selector) {
// 代理
target = e.target
if (target.matches(selector)) {
fn.call(target, e)
}
} else {
// 不使用代理
fn()
}
})
}