只绑定一次事件的简单方法

标签：star   false   一个   Once   new   简便   lse   listen   pass   

概述

今天我无意中看到了只执行一次事件的简便方法，记录下来，供以后工作时参考，相信对其他人也有用。

一般方法

先来回顾一下一般方法：

const $once = function (target, event, fn) {
    const that = this;

    function newFn (...args) {
        target.removeEventListener(event, newFn);
        fn.apply(that, ...args);
    }

    target.addEventListener(event, newFn);
}

简便方法

其实 addEventListener 的第三个参数不仅仅有 useCapture（bool值），还可能是一个 options（对象），options 的各属性解释如下：

capture: 默认值为false，是否使用事件捕获
once: 默认值为false，是否只调用一次，是的话会在调用后自动销毁 listener
passive: 默认值为false，是否永远不调用 preventDefault 方法。在某些浏览器上面，为了保证滚动性能，会针对 touchstart 和 touchmove 事件将默认值设置为 true

所以只需要使用 once 属性即可：

target.addEventListener(event, fn, { once: true });

只绑定一次事件的简单方法

标签：star   false   一个   Once   new   简便   lse   listen   pass   

原文地址：https://www.cnblogs.com/yangzhou33/p/13783237.html