码迷,mamicode.com
首页 > 其他好文 > 详细

封装事件委托

时间:2019-08-29 22:54:30      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:onclick   select   执行   cto   i++   window   click   back   log   

<!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>

封装事件委托

标签:onclick   select   执行   cto   i++   window   click   back   log   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!