jQuery ONE函数PURE JS

Question

那里！ 我在创建one像JQUERY一样的函数时遇到问题。

这是动作： https : //jsfiddle.net/77yzLt6v/

一次执行事件

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

polyfill：

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