事件委托
//事件委托:
//将原本加给多个子元素的相同事件,加给共同的父元素,利用事件冒泡的原理,配合事件源,实现原本要给子元素添加事件的过程中,叫事件委托
//事件委托的特点:
//1.提高性能
//2.可以给页面上暂时 不存在的元素绑定事件
<body>
<ul>
<li class="l">link1</li>
<li>link2</li>
<li class="l">link3</li>
<li>link4</li>
<li class="l">link5</li>
<li>link6</li>
<p>p1</p>
<p class="l">p2</p>
<p>p3</p>
<p class="l">p4</p>
</ul>
</body>
<script>
var oul = document.querySelector("ul");
var achild = document.querySelectorAll(".l")
oul.onclick = EveEnt(achild,function(){
console.log(this)
})
//立即执行的为了传参的函数
function EveEnt(child,callback){
//return的函数是真正的时间处理函数
return function(eve){
//在真正的事件处理函数中才有事件对象
var e = eve || window.event;
var target = e.target || e.srcElement;
//并且可以拿到外层函数的参数
for(var i=0;i<child.length;i++){
//遍历参数的值,与事件源判断相等
if(child[i] == target){
//执行用户传进来的回调函数,同时改变回调函数的this指向,为事件源
callback.bind(target)()
}
}
}
}
</script>
