标签：
由于开学后的编程实验课，接触了海量字符换搜索的实验，所以好几天没有学习JS课程了，今天继续学习事件绑定。
传统事件绑定存在一些问题，如：同名事件函数都执行，第二个函数会覆盖第一个。
下面我们以事件切换器（传统绑定机制）为例。
实现box标签属性红绿互换。如下：
window.onload=function(){
var box=document.getElementById(‘box‘);
box.onclick=toBlue;
};
function toRed(){
this.className=‘red‘;
this.onclick=toBlue;
}
function toBlue(){
this.className=‘blue‘;
this.onclick=toRed;
}
但传统事件机制容易出现以下的问题：覆盖问题、可读性问题和this传递问题。
我们通过如下方法来解决这些问题。
首先，添加一个事件函数addEvent。
function addEvent(obj,type,fn){ //用于保存上一个事件 var saved=null; //判断事件是否存在 if(typeof obj[‘on‘+type]==‘function‘){ saved=obj[‘on‘+type]; //保存上一个事件 } //执行事件 obj[‘on‘+type]=function(){ fn(); }; } addEvent(window,‘load‘,function(){ alert(‘Lee‘); }); addEvent(window,‘load‘,function(){ alert(‘Mr.Lee‘); });
执行结果会出现Lee和Mr.Lee。
当然，在添加其他事件时还会出现其他问题，如：this没有传递过去等。
解决方法是利用call传递this。如：
//执行事件 obj[‘on‘+type]=function(){ fn.call(this); };
在事件切换中，常会出现过多切换会使浏览器卡死报错too much recursion。原因是保存了太多的事件，解决办法是及时释放执行过的事件对象。
我们添加一个移除事件函数。如下：
function removeEvent(obj,type){ if(obj[‘on‘+type]) obj[‘on‘+type]=null; }
但我们在移除事件时，要注意不要一概而论，把整个事件对象全部删除，导致影响其他对象方法的调用。
标签：
原文地址：http://www.cnblogs.com/tangzhirong/p/4827199.html
