Javascript事件绑定及深入

　　由于开学后的编程实验课，接触了海量字符换搜索的实验，所以好几天没有学习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;
}

　　但我们在移除事件时，要注意不要一概而论，把整个事件对象全部删除，导致影响其他对象方法的调用。