Question

我有以下代码：

Android

如果我能够在侦听器中命名函数，那将很容易。但在我的情况下，这是不可能的。

看起来像是：

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

有没有办法让它发挥作用？

谢谢。

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

有两种方法

定义函数时，然后根据需要添加和删除侦听器：

// 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);

添加事件侦听器并在事件发生时将其删除：

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

在ES6中删除事件侦听器

3 个答案: