[Edit]

JavaScript - remove all events from DOM element with VanillaJS

1 contributors

2 contributions

0 discussions

4 points

Created by:

Zayyan-Todd

860

In this article, we would like to show you how to remove events using VanillaJS.

Quick solutions

Edit

xxxxxxxxxx
 
// 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

Edit

There is no way to remove all events from the element. There are two solutions:

keeping all function references and removing them 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

Edit

xxxxxxxxxx
 
<!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>

Auto running

Note: the biggest disadvantage of this approach is necessary to keep all references.

1.2. Cloning existing elements and replacing them example

Edit

xxxxxxxxxx
 
<!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>