IE 瀏覽器兼容性填坑：事件對象、目標元素與 style.removeProperty 替代方案

問題場景

原生 JS 綁定 focus/blur 事件，在 IE 中報錯：type 為空或不是對象、border 無法移除。

核心差異對照表

兼容性封裝代碼

function handleFocusEvent(e) {
    e = e || window.event;
    var target = e.srcElement || e.target;

    if (e.type === "focus") {
        target.style.backgroundColor = "lightgray";
        target.style.border = "thick solid red";
    } else {
        // IE 不支持 removeProperty，直接清空 cssText 或單獨覆蓋
        target.style.cssText = '';  // 核暴力但有效
        target.style.border = "thick solid black";
    }
}

最佳實踐建議

• 優先使用 addEventListener / attachEvent 統一綁定，避免內聯 onfocus 污染全局。
• 現代項目建議引入 Polyfill（如 eventlistener）或直接放棄 IE 老版本支持。
• 樣式操作優先用 CSS 類切換（classList.toggle），減少行內樣式操作。

總結

IE 事件模型與標準差異大，封裝兼容層或使用成熟庫（jQuery 等）是工程化解法。