Is It Possible To Remove All Event Handlers Of A Given Element In Javascript?

May 30, 2024 Post a Comment

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 n

Solution 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();

Solution 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.

Solution 3:

http://www.quirksmode.org/js/events_advanced.html - "Which event handlers are registered?" - it seems it's not possible without DOM 3 level :-(

EDIT: I've come up with this code. It suits my needs. Maybe it will be helpful for someone else.

Javascript:

functionDomLib() {


}


/**
* Based on: http://ejohn.org/blog/flexible-javascript-events/
* Function that register event and enables it to be removed without explicitly giving the function definition
*/DomLib.prototype.regEventEx = function (el, eventName, funct) {

  if (el.attachEvent) {
    el['e'+eventName+funct] = funct;
    el[eventName+funct] = function(){el['e'+eventName+funct](window.event);}
    el.attachEvent( 'on'+eventName, el[eventName+funct] );
  } else {    
    el.addEventListener(eventName, funct, false);
  } 

  if(!el.eventHolder) el.eventHolder = [];
  el.eventHolder[el.eventHolder.length] = newArray(eventName, funct);  
}

DomLib.prototype.removeEvent = function (obj, type, fn) {
  if (obj.detachEvent) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else {
    obj.removeEventListener( type, fn, false );
  }  
}


DomLib.prototype.hasEventEx = function (el, eventName, funct) {

  if (!el.eventHolder) {  
    returnfalse;
  } else {
    for (var i = 0; i < el.eventHolder.length; i++) {
      if (el.eventHolder[i][0] == eventType && String(el.eventHolder[i][1]) == String(funct)) {
        returntrue;  
      }  
    }
  }
  returnfalse;  
}

/** 
* @return - returns true if an event was removed
*/DomLib.prototype.removeEventsByTypeEx = function (el, eventType) {

  if (el.eventHolder) {  

    var removed = 0;
    for (var i = 0; i < el.eventHolder.length; i++) {
      if (el.eventHolder[i][0] == eventType) {                
        this.removeEvent(el, eventType, el.eventHolder[i][1]);
        el.eventHolder.splice(i, 1);
        removed++;
        i--;
      }  
    }

    return (removed > 0) ? true : false;
  } else {
    returnfalse; 
  }
}

Testing HTML page:

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><metahttp-equiv="Expires"content="Fri, Jan 01 1900 00:00:00 GMT"><metahttp-equiv="Pragma"content="no-cache"><metahttp-equiv="Cache-Control"content="no-cache"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><metahttp-equiv="Lang"content="en"><metaname="author"content=""><metahttp-equiv="Reply-to"content="@.com"><metaname="generator"content="PhpED 5.8"><metaname="description"content=""><metaname="keywords"content=""><metaname="creation-date"content="01/01/2009"><metaname="revisit-after"content="15 days"><title>DomLibTest</title><linktype="text/css"href="my.css"><!-- FILL IN: Location of your jQuery library --><scripttype="text/javascript"src="jQuery/jQuery-current.js"></script><!-- FILL IN: Plugin for debugging ... http://www.ecitadel.net/blog/2009/12/08/developing-jquery-use-dump-instead-alert --><scripttype="text/javascript"src="jQuery/jQuery.dump.js"></script><scripttype="text/javascript"src="DomLib.js"></script></head><body><divid="testElem-1"></div><scripttype="text/javascript">
  <!--

    var domLib = newDomLib();

    functionremoveTest(el) {

      var funct = function() { alert("#1: How Are You?");};
      var funct2 = function() { alert("#2: How Are You?");};                  

      domLib.regEventEx(el, "click", funct);
      domLib.regEventEx(el, "mousemove", funct2);
      domLib.regEventEx(el, "mousemove", funct2);
      domLib.regEventEx(el, "mousemove", funct2);

      $.dump(el.eventHolder);      
      domLib.removeEventsByTypeEx(el, "mousemove");      
      $.dump(el.eventHolder);
    }

    removeTest(document.getElementById('testElem-1'));

  -->
  </script></body></html>

Solution 4:

According to this thread, you can use cloneNode to strip all the event listeners from a javascript element, like so:

var new_element = old_element.cloneNode(true);
 old_element.parentNode.replaceChild(new_element, old_element);

Solution 5:

functionremoveEvents(elem) {
  var children = elem.children;
  for (var i = 0; i < children.length; i++) {
    var el = children[i];
    el.removeAttribute("onkeyup");
    el.removeAttribute("onmouseover");
    el.removeAttribute("onmouseout");
    el.removeAttribute("onclick");
    removeEvents(el);
  }
}

this worked for me

JavaScript Programmer Calgary