平时给元素绑定事件一般是直接写到属性上(即0级事件处理程序)或是addEventListener()监听事件(2级事件处理程序)。但有些应用场景以上方法可能不太管用,比如给后来动态添加的元素绑定事件监听。这时就可以使用事件委托了(也叫事件代理)。事件委托简单通俗理解就是,给外层元素绑定事件,然后利用事件冒泡,针对当前触发的元素执行相应的函数。
具体代码
<ul class="list">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
</ul>
<button class="btn">添加列表</button>
<script>
var list = document.querySelector('.list');
var btn = document.querySelector('.btn');
btn.onclick = function(){
var li = document.createElement('li');
li.innerHTML = '<p>大家好<a href="javascript:;">才是真的好</a></p>'
list.appendChild(li);
}
//用for循环给每一个元素绑定事件达不到我们想要的效果
// var lis = document.querySelectorAll('.list li');
// for(var i=0; i<lis.length; i++){
// // lis[i].onclick = function(){
// // alert(this.innerText);
// // }
// lis[i].addEventListener('click', function(){
// alert(this.innerText);
// },false);
// }
on(list, 'click', 'a', function(){
alert(this.innerText);
})
function on(el, eventType, selector, fn){
if(fn === undefined){ //如果只传三个参数,即为自身绑定事件
fn = selector;
selector = null;
el.addEventListener(eventType, fn, false);
}else{ //如果传入四个参数,即为事件委托,selector为事件目标
el.addEventListener(eventType, function(e){
if(e.target.matches(selector)){ //如果当前时间目标与selector匹配
fn.call(e.target, e);
}
}, false);
}
}
</script>