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