如何在 JavaScript 中刪除事件處理程序

使用 addEventListener() 刪除已附加到 HTML 元素的事件處理程序 方法，你可以使用 removeEventListener() 方法。

removeEventListener() 接受事件的名稱（如 click , change 等）和對事件處理程序方法的引用作為輸入，並將其從 HTML DOM 中刪除。

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

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

現在定義一個充當事件處理程序的函數：

const handler = (e) => {
    console.log(`Button is clicked!`);
};

以下代碼片段將上述事件處理程序附加到 click 按鈕事件：

const btn = document.querySelector('#register');
btn.addEventListener('click', handler);

現在從 click 中刪除點擊事件處理程序 按鈕的事件，只需使用 removeEventListener() 事件處理程序如下：

btn.removeEventListener('click', handler);

注意 removeEventListener() 的事件名稱和事件處理函數必須相同 上班。

如果您使用匿名函數作為事件處理程序，則無法刪除它。以下示例不起作用：

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

// Attach an event handler
btn.addEventListener('click', (e) => {
    console.log(`Button is clicked!`);
});

// Remove an event handler
// It won't have any effect
btn.removeEventListener('click', (e) => {
    console.log(`Event is removed.`);
});