只触发一次事件？答案

【问题标题】：Only fire an event once?只触发一次事件？
【发布时间】：2010-08-03 05:01:03
【问题描述】：

如何控制只触发一次事件？

实际上，快速谷歌似乎暗示.one 有帮助的事实..

【问题讨论】：

【解决方案1】：

如果您不需要支持 Internet Explorer，请使用 once：

element.addEventListener(event, func, { once: true });

否则使用这个：

function addEventListenerOnce(target, type, listener, addOptions, removeOptions) {
    target.addEventListener(type, function fn(event) {
        target.removeEventListener(type, fn, removeOptions);
        listener.apply(this, arguments);
    }, addOptions);
}

addEventListenerOnce(document.getElementById("myelement"), "click", function (event) {
    alert("You'll only see this once!");
});

【讨论】：

漂亮的方法，我从没想过使用这样的命名函数。请参阅我的答案，以了解保留this 并传递所有参数的略微改进的版本。
@Shikyo 我添加了this

【解决方案2】：

您可以使用 jQuery 的one method，它只会订阅第一次发生的事件。
例如：

$('something').one('click', function(e) {
    alert('You will only see this once.');
});

【讨论】：

好吧，太棒了，只是想知道，括号之间的“e”是什么？另外，这个函数需要两个参数吗？ 1 代表你只想运行一次，另一个代表函数？
e 是回调的事件形式参数。在这种情况下，它是未使用的。两个参数分别是事件类型和函数。
太棒了！这真的很有帮助，这和 .bind 有什么区别？是不是不需要像.unbind这样的东西解除绑定？
one 方法可以带三个参数；请参阅文档。 api.jquery.com/one
如文档所述，调用one方法相当于调用bind，然后在handler中调用unbind。

【解决方案3】：

和 rofrol 的回答一样，只是另一种形式：

    function addEventListenerOnce(element, event, fn) {
        var func = function () {
            element.removeEventListener(event, func);
            fn();
        };
        element.addEventListener(event, func);
    }

【讨论】：

【解决方案4】：

略微改进的 rofrol 的 anwser 版本：

function addEventListenerOnce(target, type, listener) {
    target.addEventListener(type, function fn() {
        target.removeEventListener(type, fn);
        listener.apply(this, arguments);
    });
}

通过使用 apply 所有参数都被传递，this 按预期工作。

【讨论】：

你不应该再使用那个黑客了，有一种简单的方法可以做到这一点 element.addEventListener(event, func, { once: true })，正如@kapitalny 指出的那样
确实好很多，但是 IE 是一个... caniuse.com/#search=once

【解决方案5】：

只需在 addEventListener 方法调用中使用适当的选项：

element.addEventListener(event, func, { once: true })

【讨论】：

IE 不支持。

【解决方案6】：

此外，您还可以这样做：

window.addEventListener("click", function handleClick(e) {
    window.removeEventListener("click", handleClick);

    // ...
});

【讨论】：

【解决方案7】：

添加了添加/删除事件监听器的选项：

function addEventListenerOnce(target, type, listener, optionsOrUseCaptureForAdd, optionsOrUseCaptureForRemove) {
    const f = event => {
        target.removeEventListener(type, f, optionsOrUseCaptureForRemove);
        listener(event);
    }
    target.addEventListener(type, f, optionsOrUseCaptureForAdd);
}

【讨论】：