事件切换

还记得大一的时候，老是想着通过代码实现一点看上去很有趣的事，不过那时学的是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块的颜色在红、蓝两种颜色之间切换了，是不是像魔术？

异乡小龟