javascript事件绑定学习要点

事件绑定分为两种：一种是传统事件绑定（内联模型，脚本模型），一种是现代事件绑定（dom2级模型）。现代事件绑定在传统绑定上提供了更强大更方便的功能。

一 传统事件绑定的问题

传统事件绑定中的内联模型不做讨论，基本很少去用。先来看一下脚本模型，脚本模型将一个函数赋值给一个事件处理函数。传统绑定如：

window.onload=function(){
 var box=document.getelementbyid('box');
 box.onclick = function(){
  alert('lee');
 };
};

问题一：一个事件处理函数触发两次事件

如果一个页面有两个或者多个js，并且第一个js是第一个程序开发的，第二个js是第二个程序员开发的。第一个window.onload被覆盖了，如

window.onload=function(){
 alert('lee');
};

window.onload=function(){
 alert('mr.lee');
} 

结果只是打印了 mr.lee

其实是有办法解决这个问题的，看下面这两种形式。
a:

alert(window.onload);//一开始没有注册window.onload,那么就是null

window.onload=function(){
 alert('lee');
};

alert(window.onload);//如果已经有window.onload,打印的是函数function

window.onload=function(){
 alert('mr.lee');
} 

b:

alert(typeof window.onload);//一开始没有window.onolad,旧版火狐显示undefined,新版显示object,

window.onload=function(){
 alert('lee');
};

alert(typeof window.onload);//如果已经有window.onload,所有浏览器都会显示function

window.onload=function(){
 alert('mr.lee');
}

所以解决办法有了。

 window.onload=function(){
 alert('lee');
};

if(typeof window.onload=='function'){
 var saved=null;//保存上一个事件对象
 saved=window.onload;
}

//saved 就是window.onload,saved()相当于window.onload(),但是window.onload()不能执行的
//所以saved()相当于window.onload=function(){}

window.onload=function(){
 if(saved){
  saved();//执行上一个事件 window.onload=function(){}
 }
 alert('mr.lee'); //执行本事件
}

问题二：事件切换器
切换一个id为box的div，让里面的背景red与blue直接切换，并且切换之前弹框一次，如：

window.onload=function(){
 var box=document.getelementbyid('box');
 box.classname="red";
 box.onclick=function(){
  alert('lee'); //只执行了一次
  blue.call(this);//通过匿名函数执行某一函数，那么里面的this就是代表的window,所以可以通过call传递
 };
}

function blue(){
 this.classname="blue";
 this.onclick=red;
 
}

function red(){
 this.classname="red";
 this.onclick=blue;
}

上面的代码虽然实现了切换功能，但是弹框只执行了一次。

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addevent(obj,type,fn){
 //用于保存上一个事件
 var saved=null;
 if(typeof obj['on'+type]=='function'){
  saved=obj['on'+type];//保存上一个事件
 }
 obj['on'+type]=function(){
  if(saved){
   saved();
  }
  fn.call(this);
 }
 
}
addevent(window,'load',function(){
 var box=document.getelementbyid("box");
 //addevent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
 // alert('ss');
 //});
 addevent(box,'click',blue);
});

function red(){
 this.classname="red";
 addevent(box,'click',blue);
}

function blue(){
 this.classname="blue";
 addevent(box,'click',red);
}

//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉

按照上面的代码出现了注释中的错误，解决的办法如下：

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addevent(obj,type,fn){
 //用于保存上一个事件
 var saved=null;
 if(typeof obj['on'+type]=='function'){
  saved=obj['on'+type];//保存上一个事件
 }
 obj['on'+type]=function(){
  if(saved){
   saved();
  }
  fn.call(this);
 }
 
}


//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立刻移除掉


//移除事件函数
function removeevent(obj,type){
 if(obj['on'+type]){
  obj['on'+type]=null;
 }
}


addevent(window,'load',function(){
 var box=document.getelementbyid("box");
 //addevent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
 // alert('ss');
 //});
 addevent(box,'click',blue);
});

function red(){
 this.classname="red";
 removeevent(this,'click');
 addevent(box,'click',blue);
}

function blue(){
 this.classname="blue";
 removeevent(this,'click');
 addevent(box,'click',red);
}

二 w3c事件处理函数
addeventlistener()与removeeventlistener()
w3c事件处理函数两个，addeventlistener()与removeeventlistener()。

//w3c自带的两个添加事件和删除事件
1.覆盖问题，解决

window.addeventlistener('load',function(){
 alert('lee');
},false);

window.addeventlistener('load',function(){
 alert('mr.lee');
},false);

window.addeventlistener('load',function(){
 alert('mrs.lee');
},false);

2.相同函数屏蔽的问题，解决

window.addeventlistener('load',init,false);
window.addeventlistener('load',init,false);
window.addeventlistener('load',init,false);
function init(){
 alert('lee');
}

3.是否可以传递this，解决
例子1：

window.addeventlistener('load',function(){
 var box=document.getelementbyid('box');
 box.addeventlistener('click',function(){
  alert(this);
 },false);
},false);

例子2：

window.addeventlistener('load',function(){
 var box=document.getelementbyid('box');
 box.addeventlistener('click',blue,false);
},false);

function red(){
 this.classname="red";
 this.removeeventlistener('click',red,false);
 this.addeventlistener('click',blue,false);
}

function blue(){
 this.classname="blue";
 this.removeeventlistener('click',blue,false);
 this.addeventlistener('click',red,false);
}

4.添加一个额外的方法，会不会被覆盖，或者只能执行一次，解决

window.addeventlistener('load',function(){
 var box=document.getelementbyid('box');
 box.addeventlistener('click',function(){
  alert('lee');
 },false);
 box.addeventlistener('click',blue,false);
},false);

综上所述：w3c是比较完美的解决了这些问题，非常好用，但是ie8和之前的浏览器并不支持，而是采用了自己的事件，当然ie9已经完全支持了w3c的这两个事件处理函数。

w3c可以设置冒泡和捕获方式。

支持w3c标准的浏览器在添加事件时用addeventlistener(event,fn,usecapture)方法，基中第3个参数usecapture是一个boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容w3c的浏览器(ie)用attachevent()方法，此方法没有相关设置，不过ie的事件模型默认是在事件冒泡时执行的，也就是在usecapture等于false的时候执行，所以把在处理事件时把usecapture设置为false是比较安全，也实现兼容浏览器的效果。

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
事件的传播是可以阻止的：
在w3c中，使用stoppropagation()方法
在ie下设置cancelbubble = true；

三.ie事件处理函数

attachevent()和detachevent()
ie实现了与dom中类似的两个方法：attachevent()和detachevent()。这两个方法接受相同的参数：事件名称和函数。

在使用这两组函数的时候，先把区别说一下：1.ie不支持捕获，只支持冒泡；2.ie添加事件不能屏蔽重复的函数；3.ie中的this指向的是window而不是dom对象。4.在传统事件上，ie是无法接受到event对象的，但使用了attchevent却可以，但有些区别。

1.覆盖问题,解决了，但有不同，结果是mrs.lee，mr.lee，最后是lee

window.attachevent('onload',function(){
 alert('lee');
});

window.attachevent('onload',function(){
 alert('mr.lee');
});
window.attachevent('onload',function(){
 alert('mrs.lee');
});

2.相同函数屏蔽的问题，未解决。

window.attachevent('onload',init);
window.attachevent('onload',init);

function init(){
 alert('lee');
}

3.是否可以传递this,不能，this指的是window。需要用call方法。

window.attachevent('onload',function(){
 var box=document.getelementbyid('box');
 box.attachevent('onclick',function(){
  //alert(this===box);
  alert(this===window); //true
 });
});

下面还有办法就是通过window.event.srcelement。代码如下：

window.attachevent('onload',function(){
 var box=document.getelementbyid('box');
 box.attachevent('onclick',blue);
});

function red(){
 var that=window.event.srcelement;
 that.classname="red";
 that.detachevent('onclick',red);
 that.attachevent('onclick',blue);
}

function blue(){
 var that=window.event.srcelement;
 that.classname="blue";
 that.detachevent('onclick',blue);
 that.attachevent('onclick',red);
}

4.添加一个额外的方法，会不会被覆盖，或者只能执行一次，解决。

在传统绑定上，ie是无法像w3c那样通过传参接受event对象，但是使用attachevent()却可以。

 window.attachevent('onload',function(){
 var box=document.getelementbyid('box');
 box.onclick=function(evt){ //传统方法ie无法通过参数获取evt
  alert(evt);//undefined
 }
 box.attachevent('onclick',function(evt){
  alert(evt);//object
  alert(evt.type);//click
  alert(evt.srcelement.tagname);//div
  alert(window.event.srcelement.tagname);//div
 });
});

跨浏览器的兼容

跨浏览器添加事件

function addevent(obj,type,fn){
 if(obj.addeventlistener){
  obj.addeventlistener(type,fn,false);
 }else if(obj.attachevent){
  obj.attachevent('on'+type,fn);
 }
}

跨浏览器移除事件

function removeevent(obj,type,fn){
 if(obj.removeeventlistener){
  obj.removeeventlistener(type,fn,false);
 }else if(obj.detachevent){
  obj.detachevent('on'+type,fn);
 }
}

跨浏览器获取目标对象

function gettarget(evt){
 if(evt.target){
  return evt.target;
 }else if(window.event.srcelement){
  return window.event.srcelement;
 }
}

调用方式：

addevent(window,'load',function(){
 var box=document.getelementbyid('box');
 addevent(box,'click',blue);
});


function red(evt){
 var that=gettarget(evt);
 that.classname="red";
 removeevent(that,'click',red);
 addevent(that,'click',blue);
}

function blue(evt){
 var that=gettarget(evt);
 that.classname="blue";
 removeevent(that,'click',blue);
 addevent(that,'click',red);
}

四.事件对象的其他补充

relatedtarget事件

w3c中的一个relatedtarget事件。
例如：

addevent(window,'load',function(){
 var box=document.getelementbyid('box');
 addevent(box,'mouseover',function(evt){
  alert(evt.relatedtarget); //得到移入box最近的那个dom对象
 });
 
 addevent(box,'mouseout',function(evt){
  alert(evt.relatedtarget); //从box移出最近的那个dom对象
 });
});

ie提供了两组分别用于移入移出的属性fromelement和toelement,分别对应mouseover和mouseout。

addevent(window,'load',function(){
 var box=document.getelementbyid('box');
 addevent(box,'mouseover',function(){
  alert(window.event.fromelement.tagname); //得到移入box最近的那个dom对象
 });
 
 addevent(box,'mouseout',function(){
  alert(window.event.toelement.tagname); //从box移出最近的那个dom对象
 });
});

ps:fromelement和toelement如果分别对应相反的鼠标事件，没有任何意义。

剩下要做的就是跨浏览器兼容操作：

function gettarget(evt){
 var e=evt || window.event;
 if(e.srcelment){ //ie
  if(e.type=='mouseover'){
   return e.fromelement.tagname;
  }else if(e.type="mouseout"){
   return e.toelement.tagname;
  }
 }else if(e.relatedtarget){ //w3c
  return e.relatedtarget;
 }
}

屏蔽跳转操作

取消事件的默认行为有一种不规范的做法，就是返回false。

link.onclick=function(){
 alert('lee');
 return false;
}

ps:虽然return false；可以实现这个功能，但是有漏洞。
第一：必须写到最后，这样导致中奖的代码执行后，有可能执行不到return false;
第二:return false 写到最前那么之后的自定义操作就失效了。
所以最好的办法应该是在最前面就阻止默认行为，并且后面的代码还可以执行。

link.onclick=function(evt){
 evt.preventdefault;//w3c,阻止默认行为
 alert('lee');
}

link.onclick=function(evt){
 window.event.returnvalue=false;//ie,阻止默认行为
 alert('lee');
}

那么跨浏览器的兼容：

function predef(evt){
 var e=evt || window.event;
 if(e.preventdefault){
  e.preventdefault();
 }else{
  e.returnvalue=false;
 }
}

右键菜单contextmenu
兼容：

function predef(evt){
 var e=evt || window.event;
 if(e.preventdefault){
  e.preventdefault();
 }else{
  e.returnvalue=false;
 }
}

addevent(window,"load",function(){
 var body=document.getelementsbytagname('body')[0];
 addevent(body,'contextmenu',function(evt){
  predef(evt);
 })
});

ps：contextmenu事件很常用，这直接导致浏览器兼容性较为稳定。

卸载前事件：beforeunload
这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。

addevent(window,'beforeonload',function(){
 predef(evt);
});

鼠标滚轮（mousewheel）和dommousescroll
用于获取鼠标上下滚轮的距离

addevent(document,'mousewheel',function(evt){ //非火狐
 alert(getwd(evt));
});

addevent(document,'dommousescroll',function(evt){ //火狐
 alert(getwd(evt));
});

function getwd(evt){
 var e=evt|| window.event;
 if(e.wheeldelta){
  return e.wheeldelta;
 }else if(e.detail){ //火狐
  return -evt.detail*30;
 }
}

ps：通过浏览器检测可以确定火狐只执行dommousescroll。

domcontentloaded事件和readystatechange事件

domcontentloaded事件和readystatechange事件，有关dom加载方面的事件。