还记得大一的时候，老是想着通过代码实现一点看上去很有趣的事，不过那时学的是C++，学的不好，当然也没能通过代码直观的做点东西，后来知道这个直观的东西可以简单说是“事件”。当然也就是通过代码做了一件事。
例如：在html里有一个div块，我们通过事件切换使之交替改变颜色，那么这里就要用到JS的事件切换
1 .......... 2 ........................... 3 <script type = "text/javascript" src = "demo.js"></script> 4 <style type="text/css"> 5 .red{ 6 width:400px; 7 height:400px; 8 background:red; 9 } 10 .blue{ 11 width:400px; 12 height:400px; 13 background:blue; 14 } 15 </style> 16 </head> 17 <body> 18 <div id = "box" class = "red">测试</div> 19 ............... 20 .....
js部分的切换功能：
方案1：
1 //事件切换器 2 window.onload = function () { 3 var box = document.getElementById("box"); 4 box.onclick = toBlue; 5 } 6 7 function toRed () { //如果toRed绑定了box.onclick,则this就是box，全局执行的话this就是window 8 this.className = "red"; 9 this.onclick = toBlue; 10 11 } 12 13 function toBlue () { 14 this.className = "blue"; 15 this.onclick = toRed; 16 17 }
方案2：
1 function addEvent (obj,type,fn) { 2 var saved = null; 3 if(typeof obj['on'+type] == 'function'){ 4 saved = obj['on'+type]; //保存上一个事件 5 } 6 obj['on'+type] = function () { 7 if(saved)saved(); 8 fn.call(this); 9 } 10 11 } 12 13 14 function removeEvent(obj,type){ 15 if(obj['on'+type])obj['on'+type]=null; 16 } 17 18 19 addEvent(window,'load',function () { 20 21 var box = document.getElementById("box"); 22 removeEvent(box,'click'); 23 //addEvent(box,'click',function () { 24 //alert("Lee"); 25 //}); 26 addEvent(box,'click',toBlue); 27 28 29 30 31 }); 32 33 34 35 function toRed () { //如果toRed绑定了box.onclick,则this就是box，全局执行的话this就是window 36 this.className = "red"; 37 removeEvent(this,'click'); 38 addEvent(this,'click',toBlue); 39 40 41 } 42 43 function toBlue () { 44 this.className = "blue"; 45 removeEvent(this,'click'); 46 addEvent(this,'click',toRed); 47 48 }
方案3：对于事件切换除了方案2，W3C本身提供了一种方法，如下分别为addEventListener,removeEventListener
1 window.addEventListener("load",function () { 2 var box = document.getElementById("box"); 3 box.addEventListener("click",toBlue,false); //false表示冒泡，true表示捕获 4 },false); 5 6 7 8 function toRed () { //如果toRed绑定了box.onclick,则this就是box，全局执行的话this就是window 9 this.className = "red"; 10 this.removeEventListener("click",toRed,false); 11 this.addEventListener("click",toBlue,false); 12 13 } 14 15 function toBlue () { 16 this.className = "blue"; 17 this.removeEventListener("click",toBlue,false); 18 this.addEventListener("click",toRed,false); 19 20 }
事件切换-IE自有的方案：方法有attachEvent，detachEvent
1 window.attachEvent('onload',function(){ 2 var box = document.getElementById("box"); 3 box.attachEvent('onclick',toBlue); 4 }); 5 6 function toRed () { 7 var that = window.event.srcElement; //该方法不能传递this，只能通过这样获取that了 8 that.className = 'red'; 9 that.detachEvent('onclick',toRed); 10 that.attachEvent('onclick',toBlue); 11 12 } 13 14 function toBlue () { 15 var that = window.event.srcElement; 16 that.className = 'blue'; 17 that.detachEvent('onclick',toBlue); 18 that.attachEvent('onclick',toRed); 19 20 }
兼容方案：
1 //跨浏览器添加事件 2 function addEvent(obj,type,fn) { 3 if(obj.addEventListener){ 4 obj.addEventListener(type,fn,false); 5 }else if(obj.attachEvent){ 6 obj.attachEvent('on'+type,fn); 7 } 8 } 9 10 11 //跨浏览器移除事件 12 function removeEvent(obj,type,fn) { 13 if(obj.removeEventListener){ 14 obj.removeEventListener(type,fn,false); 15 }else if(obj.detachEvent){ 16 obj.detachEvent('on'+type,fn); 17 } 18 } 19 20 function getTarget(evt){ 21 if(evt.target){ //w3c 22 return evt.target; 23 }else if (window.event.srcElement) //IE 24 { 25 return window.event.srcElement; 26 } 27 } 28 29 30 addEvent(window,'load',function() { 31 var box = document.getElementById("box"); 32 addEvent(box,'click',toBlue); 33 34 }); 35 36 function toRed (evt) { 37 var that = getTarget(evt); 38 that.className = 'red'; 39 removeEvent(that,'click',toRed); 40 41 addEvent(that,'click',toBlue); 42 43 } 44 45 function toBlue (evt) { 46 var that = getTarget(evt);; 47 that.className = 'blue'; 48 removeEvent(that,'click',toBlue); 49 50 addEvent(that,'click',toRed); 51 52 }
以上就是通过代码写了一个点击事件，点击鼠标右键就可以不断将div块的颜色在 红、蓝 两种颜色之间切换了，是不是像魔术？