How to clear / remove JavaScript event handler?

Question

Given the following HTML snippet:

<form id="aspnetForm" onsubmit="alert('On Submit Run!'); return true;"> 

I need to remove / clear the handler for the onsubmit event and register my own using jQuery or any other flavor of using JavaScript.

Answer 1

For this without any libraries:

 document.getElementById("aspnetForm").onsubmit = null; 

Answer 2

With jQuery

 $('#aspnetForm').unbind('submit'); 

And then add your own.

Answer 3

Try it, it works for me:

 $('#aspnetForm').removeAttr('onsubmit').submit(function() { alert("My new submit function justexecuted!"); }); 

See more details.

Answer 4

For jQuery, if you bind event handlers using .live, you can use .die to untie all instances associated with .live.

Answer 5

Now this is an ancient question, but, given that all major browsers have abandoned EventTarget.getEventListeners() , there is a way to remove ALL event handlers for the element and its children and preserve only the HTML structure. We simply clone the element and replace it:

 let e = document.querySelector('selector'); let clone = e.cloneNode(true); e.replaceWith(clone); 

This is the same hack as addEventListener() method with a method that tracks each handler function, but at least it can be used after the DOM is already connected to other script events.

This also works in much the same way as above, using jQuery clone() instead of cloneNode() :

 let original = $('#my-div'); let clone = original.clone(); original.replaceWith(clone); 

This template will not actually leave event handlers on the element or its child nodes, unless they are defined using the attribute like onclick="foo()" .

Answer 6

For jQuery, off() removes from it all the event handlers added by jQuery.

 $('#aspnetForm').off(); 

Calling .off () without arguments removes all handlers attached to elements.