我们设定一种场景,如下代码,一个
中包含了若干个,而且还能继续增加。那如何快捷方便的为所有的绑定事件呢?
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>
这里就会用到事件代理,我们要监听的事件,但要把具体的事件绑定到 那我们现在完善一下之前写过的通用事件绑定函数,加上事件代理 然后这样使用 最后,使用代理的优点 原文地址:https://www.cnblogs.com/mushitianya/p/10662714.html
上,然后看事件的触发点,是不是var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
var target = e.target
if (e.nodeName === 'a') {
alert(target.innerHTML)
}
})
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(e)
}
})
}
// 使用代理
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function (e) {
console.log(this.innerHTML)
})
// 不适用代理
var a = document.getElementById('a1')
bindEvent(div1, 'click', function (e) {
console.log(a.innerHTML)
})