只触发一次事件？

Question

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

实际上，快速搜索似乎暗示着 .one 有所帮助...

- Qcom

Answer 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!");
});

• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener
• http://www.sitepoint.com/create-one-time-events-javascript/
• https://www.webreflection.co.uk/blog/2016/04/17/new-dom4-standards

- rofrol

---

漂亮的方法，我从来没有想过可以像这样使用命名函数。请看我的答案，稍微改进了一下，保留了 this 并传递了所有参数。 - Shikyo

@Shikyo 我已经添加了 this。 - rofrol

Answer 2

您可以使用 jQuery 的 one 方法，该方法将仅订阅事件的第一次出现。
例如：

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

- SLaks

---

好的，太棒了，我只是想知道，在你的括号中间的'e'是什么？此外，这个函数需要两个参数吗？一个是你想要运行一次的内容，另一个是函数本身？ - Qcom

e 是回调函数的事件形式参数。在这种情况下，它未被使用。这两个参数是事件类型和函数。 - Matthew Flaschen

太棒了！这真的很有帮助，这与.bind有什么区别？它不需要像.unbind一样解除绑定吗？ - Qcom

one 方法可以接受三个参数，请参阅文档。http://api.jquery.com/one/ - SLaks

根据文档所述，调用one方法相当于先调用bind，然后在处理程序中调用unbind。 - SLaks

Answer 3

只需在addEventListener方法调用中使用正确的选项：

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

- kapitalny

---

不支持IE浏览器。 - Etienne Martin

Answer 4

稍微改进了rofrol的答案：

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

通过使用 apply() 方法，所有参数都会被传递，并且 this 的作用与预期相同。

- Shikyo

---

你不应再使用那些hack了，有一种简单的方法可以通过element.addEventListener(event, func, { once: true })实现，就像@kapitalny所指出的那样。 - John Balvin Arias

确实更好，但IE缺少对"once"事件的支持。请参考https://caniuse.com/#search=once - Shikyo

Answer 5

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

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

- ling

Answer 6

此外，您可以这样做：

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

    // ...
});

- John Weisz

Answer 7

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

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

- kofifus