封装事件委托

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<p>我是第一个p</p>
<h3>我是第一个h</h3>
<p>我是第二个p</p>
<h3>我是第二个h</h3>
<p>我是第三个p</p>
<h3>我是第三个h</h3>
</div>
</body>
<script type="text/javascript">
var obox = document.querySelector(".box");
var op = document.getElementsByTagName("p");
obox.onclick=fn(op,function(){
console.log(this)
})
function fn (child,callback){

这里的返回的函数就是我们执行的函数,如果不这样的话在我们还没有开始的时候上面已经进行了有名函数的执行
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){

通过bind强行将this的指向改为target,就是我们指向的box的子元素
callback.bind(target)()
}
}

}
}
</script>
</html>

原文地址:https://www.cnblogs.com/huangping199541/p/11432368.html