如何在纯JavaScript中仅绑定一次事件监听器？

Question

我已经知道了JQuery的解决方案。

$('#myid').one('click', function(event) {
  ...
});

但现在我正在寻找纯JavaScript的方法，因为我不使用Jquery

我检查了once选项，但它并不受所有浏览器支持，请参阅文档

- Patrissol Kenfack

---

@blex 不是的，因为那个问题的答案讨论了addEventListener和attachEvent/onclik方法之间的区别，而我谈论的是执行它们中的任何一个。 - Patrissol Kenfack

once参数并非所有浏览器都支持，请参阅文档。 - Patrissol Kenfack

Answer 1

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

你可以传递第三个参数，一个选项对象，带有{ once: true }。

底部提示无法在IE中使用 :(

const myElement = document.getElementById('my-element-id');

myElement.addEventListener('click', function namedListener() {
  // Remove the listener from the element the first time the listener is run:
  myElement.removeEventListener('click', namedListener);

  // ...do the rest of your stuff
});

- dmitrydwhite

Answer 2

在事件监听器函数内，您可以像这样删除事件监听器：

document.getElementById("myid").addEventListener("click", handler);

// handler function
function handler(e) {
    // remove this handler
    e.target.removeEventListener(e.type, arguments.callee);

    alert("This event will fire only once!");
}

编辑：虽然上述解决方案有效，但如评论中所述，arguments.callee已被弃用，在使用use strict;时可能会抛出错误，因此替代方案如下：

// handler function
var eventHandler = function(e) {
  // remove this handler
  e.target.removeEventListener('click', eventHandler, false);

  alert("This event will fire only once!");
}

document.getElementById("myid").addEventListener("click", eventHandler);

- Bryan Elliott

---

一些浏览器不支持once参数，请参见文档。 - Patrissol Kenfack

请注意使用arguments.callee的注意事项。最好使用函数的名称（特别是因为它已经被声明了）。 - RobG

arguments.callee 已经过时超过十年了，不是吗？ - John Montgomery

使用 e.currentTarget 而不是 e.target 不是更好吗？ - Bruce

如果e.type是scroll，那么e.currentTarget将为空。 - Deepkamal

好的，我当时专注于我的使用（点击事件）。 - Bruce