Is it possible to remove all event handlers of a given element in javascript?

Question

I would like to remove ALL handlers for a given event type. Let's say I've added twice "onclick event" to a button and now I would like to return back to the original state where no event handler was set to the button.

How can I do that?

P.S.: I've found removeEventListener (non-IE)/detachEvent (IE) methods but the functions want me to pass as a parameter the function that handles the event which seems to me quite clumsy because I would have to store the functions somewhere.

EDIT: http://ejohn.org/blog/flexible-javascript-events/ - I'm now using this code

Answer 1

It might be a good idea to use jQuery or a similar framework to manage all event handlers. This will give you easy-to-use, unobtrusive functions to add and remove event handlers:

$(...).on('click', function() { ... }); $(...).off('click'); // or, to unbind all events: $(...).off(); 

Answer 2

If you have only one child element under your element's parent (or if you don't mind all sibling's event handlers lost too):

elem.parentElement.innerHTML = elem.parentElement.innerHTML; 

Tested in Chrome 49, FF 44, IE 11

It removes all 'addEventListener'-s.