在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); });