程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-JS事件處理函數的一些問題

javascript-JS事件處理函數的一些問題

編輯：編程綜合問答

JS事件處理函數的一些問題

現代的事件處理函數，其遞歸的原理是什麼？
我寫了一個事件切換器，原始的一個div顏色為紅色，點擊後變成藍色，再點擊又變成紅色，就這樣切換。代碼如下：
HTML代碼：

<head>
    <style type="text/css">
        #box{
            width:100px;
            height:100px;
        }
        .red{
            background-color:red;
        }
        .blue{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="box" class="red">顏色切換器</div>
</body>

JS代碼：

 //事件添加函數
 function addEvent(obj, type, fn){
     var saved = null;
     if(obj.type){
        saved = obj.type;
     }
     obj.type = function(){
        if(saved) saved();
        fn.call(this);
     };
 }

 //事件刪除函數
 removeEvent(obj, type){
     if(obj.type) obj.type = null;
 }

 //顏色切換函數
 function toBlue(){
     this.className = 'blue';
     removeEvent(this, 'onclick');
     addEvent(this, 'onclick', toRed);
 }

 function toRed(){
     this.className = 'red';
     removeEvent(this, 'onclick');
     addEvent(this, 'onclick', toBlue);
 }

 //開始執行
 addEvent(window, 'onload', function(){
     var box = document.getElementById('box');
     addEvent(box, 'onclick', toBlue);
 });

當開始執行時，首先點擊了div，顏色變藍，再點擊就變紅，切換時的運行機理是什麼？為何點擊後還能繼續成功點擊？