如何在 JavaScript 中創建一次性事件處理程序

當您使用 addEventListener() 將事件處理程序註冊到元素的事件時 方法，每次事件發生時都會執行事件處理程序。

要創建在事件第一次發生時只執行一次的一次性事件處理程序，可以使用 addEventListener() 的第三個參數 方法：

elem.addEventListener(type, handler, {
    once: true
});

addEventListener()的第三個參數 方法是一個可選對象，它定義了事件監聽器的屬性。它的屬性之一是 once;一個布爾值，指示事件偵聽器在添加後最多應調用一次。如果設置為 true , 事件處理程序會在第一次執行後自動移除。

假設您有以下 <button> 元素：

<button id="register">Register Now</button>

以下示例演示如何將一次性事件處理程序註冊到 click 按鈕事件：

const btn = document.querySelector('#register');

// Attach a one-off event handler
btn.addEventListener('click', (e) => {
    console.log(`Button is clicked!`);
}, {
    once: true
});

addEventListener()的第三個參數 方法僅適用於現代瀏覽器。對於 Internet Explorer 等舊瀏覽器，您必須使用 removeEventListener() 手動刪除事件處理程序 第一次執行後：

// Create an Event Handler
const handler = (e) => {
    console.log(`Button is clicked!`);

    // Remove event handler after first execution
    btn.removeEventListener('click', handler);
};

// Attach event handler to button
const btn = document.querySelector('#register');

btn.addEventListener('click', handler);