JS：事件处理程序

在JQuery中有个toggle事件，可以绑定两个或多个函数，可以轮流相应click事件，这两天学习到原来javascript中有两个方法（也可以说是四个）同样可以实现这个功能。

#box{
        margin: 50px;
        width: 200px;
        height: 200px;    
    }
.blue{
        background: blue;
    }
.red{
        background: red;
    }

1.W3C 下的事件处理：

　　addEventListener() ：用于处理指定的操作；

　　removeEventListener()：用于删除事件程序

这里两个方法都接受3个参数哦：要处理的事件名（click...），事件处理函数，一个布尔值（ture：表示捕获阶段调用事件处理程序，false表示：冒泡阶段调用）。

window.addEventListener("load", function(){
 　　var box = document.getElementById("box");
 　　box.addEventListener("click", toRed,false);
 　　box.addEventListener("click",function(){ //不会被误删，每次都执行
 　　　　this.innerHTML = "CCCCCCCCC";
 　　},false)

 },false);

 function toRed(){
 　　　this.className = "red";
　　　 // alert(this.tagName); this是事件目标（div）
 　　　this.addEventListener("click",toBlue,false);
　　　 this.removeEventListener("click",toRed,false);

 }

 function toBlue(){
　　    this.className = "blue";
　　    this.innerHTML = "NNNNNNN";
　　    this.addEventListener("click",toRed,false);
 　　   this.removeEventListener("click",toBlue,false);

}

ps:通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除是传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。

2.但是IE9以下的浏览器并不支持这两个方法，为此IE提供了另外两个方法：attachEvent()和detachEvent()

var btn = document.getElementById("box");

btn.attachEvent("onclick",function(){

　　alert(this === window); //true ，这里的this是window对象

　　alert(123);

});

btn.attachEvent("onclick",function(){

　　alert(456);

});

这里调用了两次attachEvent(),为同一个按添加了两个不同的事件处理程序。但与DOM方法不同的是，这些事件处理程序不是以添加他们的顺序执行，而是以相反的顺序被触发。先弹“456”，然后是“123”。

ps:attachEvent()和detachEvent()也可以多次添加事件，通过attachEvent添加的匿名函数同样无法移除，参数处理事件名称之前要加“on”，没有布尔值.

3.跨浏览器的事件处理程序　　

　　

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) { //W3C
　　　　　　　　return evt.target;
　　　　　　}else if (window.event.srcElement) {
　　　　　　　　return window.event.srcElement;
　　　　　　}
　　　　}



　　　　addEvent(window, "load", function(){
　　　　　　var btn = document.getElementById("box");
　　　　　　addEvent(btn, "click", toRed);
　　　　});



　　　　function toRed(evt){
　　　　　　var that = getTarget(evt);
　　　　　　that.className = "red";
　　　　　　addEvent(that, "click", toBlue); 
　　　　　　removeEvent(that,"click", toRed);
　　　　}

　　　　function toBlue(evt){
　　　　　　var that = getTarget(evt);
　　　　　　that.className = "blue";
　　　　　　addEvent(that, "click", toRed);
　　　　　　removeEvent(that, "click", toBlue);
　　　　}