JavaScript 中的高階事件處理模式-js教程-PHP中文網

Advanced Event Handling Patterns in JavaScript

JavaScript事件處理是建立動態互動式Web應用的核心。雖然基本的事件處理（例如，addEventListener）很簡單，但進階模式允許開發者優化效能、處理複雜的使用者互動並編寫易於維護的程式碼。

本文探討了JavaScript中的高階事件處理模式，並提供了實用範例來提升您的事件處理技能。

事件委託

什麼是事件委託？

事件委託是指將單一事件監聽器附加到父元素以管理其子元素的事件。此模式對於頁面載入後動態新增至DOM的元素特別有用。

範例：

<code class="language-javascript">document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("点击了子元素：", event.target.textContent);
    }
});</code>

登入後複製

為什麼要使用事件委託？

減少事件監聽器的數量，提高效能。
簡化動態添加元素的管理。

節流與防手震

它們是什麼？

節流確保函數在指定的時間間隔內執行最多一次。
防手震延遲函數的執行，直到上次事件發生後經過一定時間。

範例：

節流

<code class="language-javascript">function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已调整！");
    }, 200)
);</code>

登入後複製

防手震

<code class="language-javascript">function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

const searchInput = document.getElementById("search");
searchInput.addEventListener(
    "input",
    debounce(() => {
        console.log("输入事件触发！");
    }, 300)
);</code>

登入後複製

為什麼要使用它們？

透過減少冗餘函數呼叫來提高效能，尤其是在高頻事件（如調整大小或滾動）期間。

自訂事件發射器

它們是什麼？

自訂事件發射器可讓開發人員建立、分派和監聽自己的事件，以提高模組化程度。

<code class="language-javascript">const eventEmitter = {
    events: {},
    on(event, listener) {
        if (!this.events[event]) this.events[event] = [];
        this.events[event].push(listener);
    },
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach((listener) => listener(data));
        }
    },
};

eventEmitter.on("dataReceived", (data) => {
    console.log("收到数据：", data);
});

eventEmitter.emit("dataReceived", { id: 1, message: "Hello!" });</code>

登入後複製

為什麼要使用它們？

增強元件的模組化和解耦。
促進應用程式不同部分之間的溝通。

一次性事件處理

什麼是事件一次處理？

有時，您只需要事件處理程序執行一次。現代JavaScript提供了一種優雅的方式來處理這個問題。

範例

<code class="language-javascript">const button = document.getElementById("myButton");

button.addEventListener(
    "click",
    () => {
        console.log("按钮被点击！");
    },
    { once: true }
);</code>

登入後複製

為什麼要使用它？

簡化一次性事件的邏輯。
透過自動刪除監聽器來避免記憶體洩漏。

事件處理程序組合

什麼是事件處理程序組合？

事件處理程序組合涉及組合多個處理程序以順序處理事件。

範例

<code class="language-javascript">function composeHandlers(...handlers) {
    return function(event) {
        handlers.forEach((handler) => handler(event));
    };
}

function logClick(event) {
    console.log("点击：", event.target);
}

function changeBackground(event) {
    event.target.style.backgroundColor = "yellow";
}

document.getElementById("myElement").addEventListener(
    "click",
    composeHandlers(logClick, changeBackground)
);</code>

登入後複製

為什麼要使用它？

保持處理程序的小巧和可重複使用性。
促進簡潔易維護的程式碼。

捕獲與冒泡

它們是什麼？

JavaScript事件流分為兩個階段：

捕獲階段: 事件從根元素流向目標元素。
冒泡階段: 事件從目標元素流回根元素。

範例

<code class="language-javascript">document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("点击了子元素：", event.target.textContent);
    }
});</code>

登入後複製

為什麼要使用它？

提供管理事件傳播的彈性。

阻止預設行為和停止傳播

它們是什麼？

preventDefault() 阻止預設的瀏覽器操作（例如，表單提交）。
stopPropagation() 阻止事件傳播到其他監聽器。

範例

<code class="language-javascript">function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已调整！");
    }, 200)
);</code>

登入後複製

為什麼要使用它？