如何在纯JavaScript中只绑定一次事件侦听器

Question

我已经知道Jquery解决方案

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

但现在我找到了纯JavaScript的方式，因为我没有使用Jquery

我已经检查了once选项，但并非所有浏览器都支持它。请参阅文档

Answer 1

https://developer.mozilla.org/en-US/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
});

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