EN
JavaScript - remove all events from DOM element with VanillaJS
4
points
In this article, we would like to show you how to remove events using VanillaJS.
Quick solutions
// 1. Removing all events by replacing element examples
// 1.1. Keeping all function references example
// this approach requires to write some logic what has been presented in below article
// 1.2. Cloning existing element and replacing it example
var clone = element.cloneNode(true);
parent.replaceChild(clone, element);
// 2. jQuery examples
//Â https://dirask.com/q/jquery-how-to-remove-event-zjMozD
1. Removing all events by replacing element examples
There is no way to remove all events from the element. There are two solutions:
- keeping all function references and removing them withÂ
removeEventListenermethod, - cloning existing element and replacing it - clone operation does not copy events added withÂ
addEventListener method.
1.1. Keeping all function references example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
function addEvent(element, name, handler) {
var events = element.$EVENTS;
if(events == null)
events = element.$EVENTS = { };
var handlers = events[name];
if(handlers == null)
handlers = events[name] = [ ];
var index = handlers.indexOf(handler);
if(index == -1) {
handlers.push(handler);
element.addEventListener(name, handler);
}
}
function removeEvent(element, name, handler) {
var events = element.$EVENTS;
if(events == null)
return;
var handlers = events[name];
if(handlers == null)
return;
var index = handlers.indexOf(handler);
if(index > -1) {
handlers.splice(index, 1);
element.removeEventListener(name, handler);
}
}
function clearEvents(element, name) {
var events = element.$EVENTS;
if(events) {
function removeHandlers(handlers, name) {
for(var i = 0; i < handlers.length; ++i) {
element.removeEventListener(name, handlers[i]);
}
}
if(name) {
var handlers = events[name];
if(handlers) {
removeHandlers(handlers, name);
}
} else {
for(var key in events) {
removeHandlers(events[key], key);
}
delete element.$EVENTS;
}
}
}
</script>
</head>
<body>
<button id="my-button">
Click button...
</button>
<br /><br />
<button onclick="removeEvents();">
Remove all events...
</button>
<script>
var button = document.getElementById('my-button');
function onClick() {
console.log('Event name: click');
}
function onMouseover() {
console.log('Event name: mouseover');
}
function onMouseout() {
console.log('Event name: mouseout');
}
addEvent(button, 'click', onClick);
addEvent(button, 'mouseover', onMouseover);
addEvent(button, 'mouseout', onMouseout);
function removeEvents() {
clearEvents(button);
/*
clearEvents(button, 'click');
clearEvents(button, 'mouseover');
clearEvents(button, 'mouseout');
*/
}
</script>
</body>
</html>
Note: the biggest disadvantage of this approach is necessary to keep all references.
1.2. Cloning existing elements and replacing them example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
function clearEvents(element) {
var parent = element.parentNode;
if (parent) {
var clone = element.cloneNode(true);
parent.replaceChild(clone, element);
}
}
</script>
</head>
<body>
<button id="my-button" onclick="console.log('This kind of events are cloned.');">
Click button...
</button>
<br /><br />
<button onclick="removeEvents();">
Remove click event...
</button>
<script>
var button = document.getElementById('my-button');
function onClick() {
console.log('Event name: click');
}
function onMouseover() {
console.log('Event name: mouseover');
}
function onMouseout() {
console.log('Event name: mouseout');
}
button.addEventListener('click', onClick);
button.addEventListener('mouseover', onMouseover);
button.addEventListener('mouseout', onMouseout);
function removeEvents() {
clearEvents(button);
}
</script>
</body>
</html>
Note: this approach clones all event attributes / properties too (e.g.
onclick). It means they should be removed manually.
2. jQuery examples
How to remove events with jQuery has been described in this article.