在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);
}