there! i have a problem when creating one function just like JQUERY does.

here is the action : /

one time execution event

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");

});

what's wrong with my code?

thanks in advance...

there! i have a problem when creating one function just like JQUERY does.

here is the action : https://jsfiddle/77yzLt6v/

one time execution event

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");

});

what's wrong with my code?

thanks in advance...

• javascript
• jquery

• you dont want to use pure jquery code? – mmativ Commented Mar 18, 2016 at 9:45
• 2 you never call callback in the listener callback, removeListener does not remove the right function as you added an anonymous function as listener – Hacketo Commented Mar 18, 2016 at 9:46
• @mmativ, yeah, i want to learn how jquery does it. – Ching Ching Commented Mar 18, 2016 at 9:48

2 Answers 2

Your code binds an event handler that removes callback as an event handler.

The only problem is … you never bound callback as an event handler in the first place.

You want something more like this:

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

i.e.

• You need to call the callback
• You need to remove the event handler you actually bound

New standard supports this, but don't work in any browser yet (caniuse.)

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