JavaScript 事件處理函數切換機制：紅藍方塊點擊切換原理解析

程式碼分析

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

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

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

運行機理

• 這並非遞迴，而是「事件處理函數的切換」。
• 第一次點擊時執行 toBlue，將背景改為藍色，並將下一次點擊的處理函數替換為 toRed。
• 第二次點擊執行 toRed，將背景改回紅色，並將處理函數替換回 toBlue。
• 如此循環，即可實現紅藍交替切換。