javascript实现简单的on事件绑定
实现一个简单的on和off方法
介绍:
Event对象:
funcList:{},//保存delegate所绑定的方法
ieFuncList:{}//保存ie下的绑定方法
Event对象中的on,off方法,主要调用
Event.addEvent,Event.delegateHandle这两个方法
Event.addEvent:调用底层的addEventListener添加监听事件
Event.delegateHandle:当发生事件之后,随着事件的冒泡上升,判断存在事件委托的元素,并执行对应的回调函数
addEvent/offEvent:
obj.addEventListener(type,fn,false);
obj.removeEventListener(type,fn,false);
代码-Event.js
/**
*addEvent
*authorlaynezhou@tencent.com
*/
window.Event={};
varEvent={
funcList:{},//保存delegate所绑定的方法
ieFuncList:{},//由于保存在ie下绑定的方法
on:function(obj,selector,type,fn){
if(!obj||!selector)returnfalse;
varfnNew=Event.delegateHandle(obj,selector,fn);
Event.addEvent(obj,type,fnNew);
/*将绑定的方法存入Event.funcList，以便之后解绑操作*/
if(!Event.funcList[selector]){
Event.funcList[selector]={};
}
if(!Event.funcList[selector][type]){
Event.funcList[selector][type]={};
}
Event.funcList[selector][type][fn]=fnNew;
},
off:function(obj,selector,type,fn){
if(!obj||!selector||!Event.funcList[selector]){
returnfalse;
}
varfnNew=Event.funcList[selector][type][fn];
if(!fnNew){
return;
}
Event.offEvent(obj,type,fnNew);
Event.funcList[selector][type][fn]=null;
},
delegateHandle:function(obj,selector,fn){
/*实现delegate的转换方法，事件冒泡上升时,符合条件时才会执行回调函数*/
varfunc=function(event){
varevent=event||window.event;
vartarget=event.srcElement||event.target;
varparent=target;
functioncontain(item,elmName){
if(elmName.split('#')[1]){//byid
if(item.id&&item.id===elmName.split('#')[1]){
returntrue;
}
}
if(elmName.split('.')[1]){//byclass
if(hasClass(item,elmName.split('.')[1])){
returntrue;
}
}
if(item.tagName==elmName.toUpperCase()){
returntrue;//bytagname
}
returnfalse;
}
while(parent){
/*如果触发的元素，属于(selector)元素的子级。*/
if(obj==parent){
returnfalse;//触发元素是自己
}
if(contain(parent,selector)){
fn.call(obj,event);
return;
}
parent=parent.parentNode;
}
};
returnfunc;
},
addEvent:function(target,type,fn){
if(!target)returnfalse;
varadd=function(obj){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else{
//forie
if(!Event.ieFuncList[obj])Event.ieFuncList[obj]={};
if(!Event.ieFuncList[obj][type])Event.ieFuncList[obj][type]={};
Event.ieFuncList[obj][type][fn]=function(){
fn.apply(obj,arguments);
};
obj.attachEvent("on"+type,Event.ieFuncList[obj][type][fn]);
}
}
if(target.length>=0&&target!==window&&!target.tagName){
for(vari=0,l=target.length;i<l;i++){
add(target[i])
}
}else{
add(target);
}
},
offEvent:function(target,type,fn){
if(!target)returnfalse;
varremove=function(obj){
if(obj.addEventListener){
obj.removeEventListener(type,fn,false);
}else{
//forie
if(!Event.ieFuncList[obj]||!Event.ieFuncList[obj][type]||!Event.ieFuncList[obj][type][fn]){
return;
}
obj.detachEvent("on"+type,Event.ieFuncList[obj][type][fn],false);
Event.ieFuncList[obj][type][fn]={};
}
}
if(target.length>=0&&target!==window&&!target.tagName){
for(vari=0,l=target.length;i<l;i++){
remove(target[i])
}
}else{
remove(target);
}
},
};
代码-DEMO.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>test</title>
</head>
<body>
<p>测试Event</p>
<divid=content>
<ul>
<li><buttonid="btn1">1</button></li>
<li><buttonid="btn2">2</button></li>
<li><buttonid="btn3">3</button></li>
<li><buttonid="btn4">4</button></li>
<li><buttonid="btn5">5</button></li>
</ul>
<buttonid="unbind">取消绑定</button>
</div>
<pid="text"></p>
<scriptsrc="addEvent.js"></script>
<script>
(function(){
/*演示demo*/
var$id=function(id)
{
returndocument.getElementById(id)||id;
}
varouter=$id("content"),
btn=$id("text");
Event.on(outer,'button',"click",add);
Event.on(outer,'#unbind',"click",remove);
//动态添加一个按钮,查看是否有事件响应
varnewbtn=document.createElement("button");
varnode=document.createTextNode("newbutton");
newbtn.appendChild(node);
outer.appendChild(newbtn);
functionadd(){
vare=arguments[0]||window.event;
vartarget=e.srcElement||e.target;
console.log("target:",target);
btn.innerHTML=target.innerHTML+''+e.type;
}
functionremove(){
Event.off(outer,'button',"click",add);
Event.off(outer,'#unbind',"click",remove);
}
})();
</script>
</body>
</html>