Plain Javascript unbind document event

Question

I have difficulties with event listeners and unbinding them. I have the following code:

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

And I apply the function like this:

function captureMouseDown() {
    console.log('mouse downed');
}

delegate(document, 'mousedown', '.js-flex', captureMouseDown);

How do I undelegate the event on the document and/or the selector js-flex

you can use `removeEventListener` – Dominik Matis Sep 15 '19 at 09:08 — Dominik Matis, Sep 15 '19 at 09:08

score 1 · Answer 1 · answered Sep 15 '19 at 09:09

One option is to have delegate return the function passed to addEventListener, and then you can call removeEventListener with it:

function delegate(el, evt, sel, handler) {
    const listener = function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    };
    el.addEventListener(evt, listener);
    return listener;
}

const listener = delegate(document, 'mousedown', '.js-flex', captureMouseDown);
// ...
document.removeEventListener('mousedown', listener);

Plain Javascript unbind document event

1 Answers1