在ES6中刪除事件偵聽器

Question

我有以下代碼：

document.getElementsByClassName('drag')[i].addEventListener('mousedown', (e) => {
    console.log('mousedown' + i);
});

如果我能夠在偵聽器中命名函數，那將很容易。 但在我的情況下，這是不可能的。

它看起來像：

e.currentTarget.removeEventListener(e.type, nameFunction);

有沒有辦法使它工作？

謝謝。

Answer 1

是的，你可以寫這樣的。

document.getElementsByClassName('drag')[i].addEventListener('mousedown', mouseDownFun);
function mouseDownFun(e){
  console.log('mousedown' + i);
}
e.currentTarget.removeEventListener(e.type, mouseDownFun);

因此，每當觸發鼠標按下事件時，它將在mouseDownFun中偵聽。

Answer 2

如果我能夠在偵聽器中命名函數，那將很容易。 但在我的情況下，這是不可能的。

如果它不允許你做你想做的事，請不要使用箭頭功能。

document.getElementsByClassName('drag')[i].addEventListener('mousedown', function handler(e) {
    console.log('mousedown' + i);
    e.currentTarget.removeEventListener(e.type, handler);
});

Answer 3

有兩種方法

1. 定義函數時，在需要時添加和刪除偵聽器：

    // Define a function const handler = () => { console.log('Click event...'); } // Select the element and add event listener const img = document.querySelector('img'); img.addEventListener('click', handler, false); // ... // Remove the event listener img.removeEventListener('click', handler, false); 

2. 添加事件偵聽器並在事件中刪除它時：

    // Select the element and add event listener const img = document.querySelector('img'); img.addEventListener('click', function handler(event) { console.log('Click event...'); // On event, remove the event listener event.currentTarget.removeEventListener(event.type, handler); });