Jquery ONE function PURE js

Jquery ONE function PURE js

本文关键字：js PURE function ONE Jquery      更新时间：2023-09-26

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

这是操作： 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");
});

我的代码有什么问题？

提前感谢...

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

唯一的问题是...您从未将callback绑定为事件处理程序。

你想要更多这样的东西：

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

即

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

新标准支持此功能，但尚未在任何浏览器中工作（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
    }
}())
相关文章：