removeEventListener without knowing the function

Question

Some of the third party plugin will attach the eventListener into the site. How to I remove the eventListener without knowing the function that attached.

I refer this removeEventListener but I can't get any clue to remove this.

Eg: getEventListeners(window) shows the events attached. But, when I try to remove the event using window.removeEventListener("eventname") is not working without knowing that function.

Please help, Thanks in advance.

Answer 1

getEventListeners(window) will return a map of events and their registered event listeners.

So for DOMContentLoaded event for example you can have many event listeners. If you know the index of the listener you want to remove (or if there exists only one), you can do:

var eventlistener = getEventListeners(window)["DOMContentLoaded"][index];
window.removeEventListener("DOMContentLoaded", 
                           eventlistener.listener,
                           eventlistener.useCapture);

Answer 2

Unfortunately, you cannot do that. You need to have a reference to the event handler function in order to remove it by removeEventListener.

Your only option if you cannot get that reference would be by entirely replacing that Node.

Answer 3

Caveat: Uses browser specific getEventListeners, which is available in Chrome and Edge.

If you need to remove all event listeners:

// selector is optional - defaults to all elements including window and document
// Do not pass window / document objects. Instead use pseudoselectors: 'window' or 'document'
// eTypeArray is optional - defaults to clearing all event types
function removeAllEventListeners(selector = '*', eTypeArray = ['*']) {
  switch (selector.toLowerCase()) {
    case 'window':
      removeListenersFromElem(window);
      break;
    case 'document':
      removeListenersFromElem(document);
      break;
    case '*':
      removeListenersFromElem(window);
      removeListenersFromElem(document);
    default:
      document.querySelectorAll(selector).forEach(removeListenersFromElem);
  }
  
  function removeListenersFromElem(elem) {
    let eListeners = getEventListeners(elem);
    let eTypes = Object.keys(eListeners);
    for (let eType of inBoth(eTypes, eTypeArray)) {
      eListeners[eType].forEach((eListener)=>{
        let options = {};
        inBoth(Object.keys(eListener), ['capture', 'once', 'passive', 'signal'])
          .forEach((key)=>{ options[key] = eListener[key] });
        elem.removeEventListener(eType, eListener.listener, eListener.useCapture);
        elem.removeEventListener(eType, eListener.listener, options);
      });
    }
  }

  function inBoth(arrA, arrB) {
    setB = new Set(arrB);
    if (setB.has('*')) {
      return arrA;
    } else {
      return arrA.filter(a => setB.has(a));
    }
  }
}

Use:

removeAllEventListeners('a.fancyLink'); // remove all event types
removeAllEventListeners('a.fancyLink', ['click', 'hover']); // remove these types
removeAllEventListeners('*', ['click', 'hover']); // remove these types everywhere
removeAllEventListeners(); // remove everything you can

Note, this may not always work. Per MDN:

It's worth noting that some browser releases have been inconsistent on this, and unless you have specific reasons otherwise, it's probably wise to use the same values used for the call to addEventListener() when calling removeEventListener().

My use of options tries to deal with this issue by hopefully calling removeEventListener with the same values used when the listener was added.

Answer 4

Update: 2023

EventListeners can be removed without knowing the actual function reference. But it will only work in modern browsers.

Use AbortController to remove the event. With AbortSignal, you can simply get the signal to remove it for you:

Sample Code:

const controller = new AbortController();
const { signal } = controller;

window.addEventListener('resize', () => doSomething(), { signal });

controller.abort(); // It wll remove the "resize" event handler.

You can check and add a polyfill for older browsers