您的位置：首页 > Web前端 > JavaScript

JavaScript 事件代理绑定

2016-07-12 17:34 555 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
.out li{line-height: 25px;width: 200px; padding: 5px; border: 1px solid #ccc; margin: 10px; cursor: pointer;}
</style>
<ul class="out">
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
<li>列表04</li>
<li>列表05</li>
<li>列表06</li>
<li>列表07</li>
</ul>

<script>

function bindEvent(dom,event,listeners){
addEvent(dom,event,function(e){
var e=e||window.event,
src= e.target|| e.srcElement,returnVar;
while(src || src!=dom){
returnVar=listeners({
e:e,
src:src
});

if(returnVar===false){
break;
}
}
})
}

function addEvent(obj,type,handle){

function createDelegate(handle,context){
return function(){
handle.apply(context,arguments);
}
}
//兼容浏览器
if(obj.addEventListener){
var handler=createDelegate(handle,obj);
obj.addEventListener(type,handler,false);
}else if(obj.attach){
var handler=createDelegate(handle,obj);
obj.attach('on'+type,handler);
}
}

var ls={};
var ulDom=document.querySelector('.out');
bindEvent(ulDom,'click',function(opts){
console.log(opts.src.innerHTML);
return false;

});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航