Remove all JavaScript event listeners of an element and its children?

Question

Is it possible to remove all event listeners of an element and its children? Something like:

myElem.removeEventListeners();

I need this because I have a complex element with events, and I need to create a copy of it -- like a static image that does not react to any events.

How are the events bound in the first place (eg `onclick=...`, `addEventListener`, library, etc)? — Crescent Fresh, Jul 11 '10 at 09:20
addEventListener() is used. It is used for myElem and for some arbitrary children depending on conditional logic triggered by the user. — Tower, Jul 11 '10 at 09:30
I take it you don't care about IE then (which uses `attachEvent`)? If that's the case, "copy" your element with `cloneNode(true)`, and magic-boom-presto, addEventListener events will not get copied. It's in the spec: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener — Crescent Fresh, Jul 11 '10 at 09:36

gblazex · Accepted Answer · 2010-07-11T09:42:37.737

25

If you use cloneNode, the event listeners won't be copied.

If you want a robust solution your best bet is probably to write a wrapper to attach/detach listeners, and keep track of them yourself. Something like Dean Edwards' addEvent.

edited Jul 11 '10 at 09:42

answered Jul 11 '10 at 09:30

gblazex

49,155
12
98
91

Thanks for the tips. I am using W3C event listeners, so, I probably have to write a wrapper, which I would like to avoid... – Tower Jul 11 '10 at 09:36
but if you use `cloneNode` your listeners won't be copied. See my update, – gblazex Jul 11 '10 at 09:40
still if there is a simple way to remove all event handler, that'd be great – nonopolarity Jun 27 '13 at 04:34
2

Unfortunatelly, I can't use that with `window` object. – Tomáš Zato Oct 13 '13 at 23:25

score -7 · Answer 2 · answered Jul 11 '10 at 09:22

-7

I do not know of one, and a search on Google didn't yield any obvious results. One easy, kludgy solution is to create a function that cycles through every event and sets it to null, such as

function removeEvents(obj)
{
    obj.onblur = null;
    obj.onchange = null;
    obj.onclick = null;
    // ...
}

Call this function as follows: removeEvents(myElem). A complete list of JavaScript event handlers can be found at http://www.elated.com/articles/events-and-event-handlers/.

Undoubtedly there is a more elegant way to write this function, but I don't know if there is a more elegant way to solve this problem. It would be lovely if someone knows of one. If you are binding events through a JavaScript library, such as jQuery, there may be other, better options.

answered Jul 11 '10 at 09:22

TNi

16,070
3
22
20

3

I'd set it to an empty function (`function () {}`) instead in case it still gets called. – Casey Chu Jul 11 '10 at 09:26
1

Depending on the browser, elements with no event handler have it set to either undefined or null. I don't think setting it to null presents any problems, but if so your suggestion should be taken. – TNi Jul 11 '10 at 09:34
1

Why is this downvoted to holy hell? Is it a bad idea, if your stuck in legacy code and can't bolt on an event library? – Marcus Frödin Dec 14 '12 at 14:51
7

This doesn't solve the problem - it just wastes cycles with hope. – Auri Rahimzadeh Jan 03 '13 at 00:55
In what JS will that actually solve the problem? – helly0d Apr 04 '13 at 12:06
5

someone took the time and effort to actually get out of his normal life and post an answer, he made an attempt, why criticise the guy. if its wrong, then it's wrong. how wil forums ever succeed if people get kicked in the ass for making a suggestion. why dont you go on and criticise all those other people that leach off every one of your priceless answers?! @TNi from everyone that uses forums sensibly, thank you for your effort. – Craig Wayne Jul 29 '13 at 12:54
1

@CraigWayne Stack Overflow is not a forum – Luke B. Sep 17 '13 at 22:14
2

This might have been a viable solution for your particular browser. It does not, however, work on the latest version (as of today) of Firefox or Chromium on Linux. It's also not documented anywhere in the ECMAScript standard as a possible solution, and therefore this is not likely to be a working solution for many people at all. While I can appreciate the idea, there's no explanation for WHY this might work, and that's why it's not a very good solution. Because then the solution is guesswork. I'm tired, I may not be saying anything cohesive. – L0j1k Oct 09 '13 at 10:15
What is wrong with this solution? [Clearly](https://medium.com/@annapeterson89/addeventlistener-vs-onclick-which-one-should-you-draft-into-your-fantasy-football-team-16ea9ae71ee0) `elt.onclick = callback` and `elt.addEventListener('click`, callback)` work differently. The latter is better to use because, you don't override existing events. But that's key for this question. Simply using `elt.onclick = () => {}` will override all events with a useless one. So you can start using `addEventListener` to add new events to a pretty much a clean slate. – s3c Nov 11 '21 at 12:29

Remove all JavaScript event listeners of an element and its children?

2 Answers2

Linked