点，我们想使用现代绑定对事件进行绑定和删除。
Jquery前端封装---事件锁定（二）用现代事件绑定封装了事件触发和删除，但还有几个问题没有得到解决：
1.无法删除事件；2.无法顺序执行；3.IE 的现代事件绑定存在内存泄漏问题。
现在我来说一下，怎么用现代事件绑定解决问题。
代码设置如下：
tool.js
function addEvent(obj,type,fn){
if(typeof obj.addEventListener!='undefined'){
obj.addEventListener(type,fn,false);
}else {
//要知道这些事件在哪些区域，还得给一个容器，所以可以建立一个哈希表
if(!obj.events) obj.events={};
//第一次执行时
if(!obj.events[type]){
//创建一个存放事件处理函数的数组
obj.events[type]=[];
//把第一次的事件处理函数先存储到第一个位置上
if(obj['on'+type]) obj.events[type][0]=fn;//这里判断事件类型是否存在，避免多存储一次
}else{
//同一注册事件进行屏蔽，不添加到计数器中
if(addEvent.equal(obj.events[type],fn)) return false;
}
//从第二次开始我们用事件计数器来存储
obj.events[type][addEvent.ID++]=fn;
//执行事件处理函数
obj['on'+type]=addEvent.exec();
}
}
addEvent.ID=1; //这里的意思很明显，就是给添加事件一个ID的属性，给每一个事件一个计数器
//执行事件处理函数
addEvent.exec=function(event){
var e=event||window.event;
var es=this.events[e.type];
for(var i in es){
es[i].call(this,e);//这是要把这个this,e传到index.js里面，防止数值在那边取不到
}
/*for(var i in obj.events[type]){
obj.events[type][i]();
}*/
}
//对同一函数进行屏蔽
addEvent.equal=function(es,fn){
for(var i in es){
if(es[i]==fn) return true;
}
return false;
}
//跨浏览器删除事件绑定
function removeEvent(obj,type,fn){
if(typeof obj.removeEventListener!='undefined'){
obj.removeEventListener(type,fn,false);
}else {
for(var i in obj.events[type]){
if(obj.events[type]==fn){
delete obj.events[type][i];
}
}
}
}
//把IE常用的event对象配对到W3C中去
addEvent.fixEvent=function(event){
event.preventDefault=addEvent.fixEvent.preventDefault;
event.stopPropagation=addEvent.fixEvent.stopPropagation;
return event;
};
//IE阻止默认行为
addEvent.fixEvent.preventDefault=function(){
this.returnValue=false;
};
//IE取消冒泡
addEvent.fixEvent.stopPropagation=function(){
this.cancelBubble=true;
};
接下来，我们看一些例子
index.js
window.οnlοad=function(){
/*var oButton=document.getElementById('button');
addEvent(oButton,'click',fn1);
addEvent(oButton,'click',fn1);
addEvent(oButton,'click',fn1);
removeEvent(oButton,'click',fn1);
//在这里又要说明一下，对于事件绑定对于高版本浏览器，或者window10来说，这无疑又是一步画蛇添足的做法
//在本人的电脑上，即使同时有三个相同的函数，也只能弹出一次窗口
*/
var a=document.getElementById('a');
addEvent(a,'click',function(e){
e.preventDefault(e);
});
};
function fn1(e){
alert('1'+this.value+e.clientX);
}
function fn2(e){
alert('2'+this.value+e.clientX);
}
function fn3(e){
alert('3'+this.value+e.clientX);
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件绑定</title>
<script type="text/javascript" src="base2.js"></script>
<script type="text/javascript" src="tool.js"></script>
<script type="text/javascript" src="index.js"></script>
<link style="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<input type="button" value="按钮" id="button" />
<a href="www.baidu.com" id="a">百度一下</a>
</body>
</html>
在这里我还需要特别的声明一下，就好比如
<a href="www.baidu.com" id="a">百度一下</a>
写上这一句，当我们在浏览器点击它的时候，它会跳转到百度的界面，为了阻止这种行为，在上面已经仔细说明了。
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
