How to remove an event listener in javascript?

Question

I am wondering how can I remove an event listener after adding one, the way you use on and off in jquery?

document.removeEventListener('touchstart');
document.addEventListener('touchstart', function (e) {
     closePopupOnClick(e, popup);
});

but this does not actually remove the event listener. If I put the addEventListener code in a function and pass that function into the the removeEventListener it will not work bc you cannot pass params into the function. Anyone know how to do this?

Answer 1

Put the listener as a variable and attach via .addEventListener

var myListener = function (e) {
    closePopupOnClick(e, popup);
};
document.addEventListener('touchstart', myListener, true);

then pass it again when removing with .removeEventListener

document.removeEventListener('touchstart', myListener);

---

If you're not in strict mode you can make a listener remove itself with arguments.callee

document.addEventListener('touchstart', function (e) {
    closePopupOnClick(e, popup);
    document.removeEventListener('touchstart', arguments.callee);
}, true);

If you are in strict mode, you have to use a named function expression if you want a function to remove itself

document.addEventListener('touchstart', function myListener(e) {
    closePopupOnClick(e, popup);
    document.removeEventListener('touchstart', myListener);
}, true);

---

If you want to use variables in the listener that may be changed by something (eg a loop), then you can write a generator function, for instance

function listenerGenerator(popup) {
    return function (e) {
        closePopupOnClick(e, popup);
    };
}

Now you can create the listener with listenerGenerator(popup) and it will scope the popup variable. Note that if popup is an Object , it will be ByRef and therefore may still be subject to changes.

Answer 2

I think a good way to do this is to add an Event yourself and then call

event.stopImmediatePropagation()

for example:

htmlElement.addEventListener('touchstart', (event) => event.stopImmediatePropagation());

In Chrome there are features like

htmlElement.removeAllListeners()

which probably remove the Listener for real. But i think it is not a wise solution because it does not seem to be well supported by other Browsers.