Languages
[Edit]
EN

JavaScript - how to remove all events from DOM element with VanillaJS?

4 points
Created by:
JustMike
26150

In JavaScript it is possible to remove event in following way.

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 element. There are two solutions:

  • keeping all function references and remove it with¬†removeEventListener method,
  • 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 element and replacing it 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.

Merged question

  1. JavaScript - how to remove all listeners in element?

See also

  1. jQuery - how to remove event?
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join