Question

有！我在创建one函数时遇到问题，就像JQUERY那样。

一次性执行事件

HTML：

<div id="justOnce">click me!</div>

function one(dom, event, callback) {
    dom.addEventListener(event, function(e) { // add event
        this.removeEventListener(event, callback); // remove it
    }); 

}    
one(document.getElementById("justOnce"), "click", function() {

    alert("this alert only show once time");

});

我的代码出了什么问题？

提前感谢...

Answer 1

您的代码绑定了一个事件处理程序，它将callback作为事件处理程序删除。

唯一的问题是......你从来没有将callback绑定为事件处理程序。

你想要更像这样的东西：

function one(dom, event, callback) {
    function handler(e) {
        callback.call(this, e);
        this.removeEventListener(event, handler);
    }
    dom.addEventListener(event, handler); 
}

即

您需要致电callback
您需要删除实际绑定的事件处理程序

Answer 2

新标准支持此功能，但尚未在任何浏览器中工作（caniuse.com）

window.addEventListener('resize', console.log, {once: true})

填充工具：

;(function(){
    let p = document.createElement('p')
    let count = 0
    let event = new CustomEvent('x')

    p.addEventListener('x', () => {i++})
    p.dispatchEvent(event)
    p.dispatchEvent(event)

    if (i != 2) return

    for (let obj of [Window, Element]) {
        let orig = obj.prototype.addEventListener
        function addEventListener(type, callback, opts) {
            let args = Array.from(arguments)
            if(opts && opts.once) {
                function handler(e) {
                    callback.call(this, e)
                    this.removeEventListener(type, handler)
                }
                args[1] = handler
            }
            orig.apply(this, args)
        }

        obj.prototype.addEventListener = addEventListener
    }
}())

Jquery ONE功能PURE js

2 个答案: