Remove specific set of event listeners from an HTML element using JavaScript

Question

I want to remove only the mouseup event listners from a selected HTML element.

I used the below code but it will remove all listners.

var old_element = divs[d];
                var new_element = old_element.cloneNode(true);
                old_element.parentNode.replaceChild(new_element, old_element);

this is how i attach event listners.

var divs = document.getElementsByTagName('body');// to enhance the preformance
for(var d in divs) { 
        try{             
            if (divs[d].addEventListener) {
                 divs[d].addEventListener('mouseup',callHighlight);
            } else {
                divs[d].attachEvent('mouseup', callHighlight);
            } 
        }catch(err){
            //alert(err.message);
        }
}

It won't remove inline listeners, nor those added using attachEvent in IE. — RobG
– RobG, Commented Oct 14, 2013 at 2:26

PSL · Accepted Answer · 2013-10-14 02:23:54Z

1

You should use removeEventListener instead of replacechild which will obviously remove all events.

 old_element.removeEventListener('mouseup', handler);

answered Oct 14, 2013 at 2:23

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

prime Over a year ago

I used that also. But in my code there were several mouseup events. I add several mouseup listeners to an element. Will your code remove all of those?

RobG Over a year ago

That only works if a reference to the listener function is available to pass to removeEventListener, so it won't work where a function expression is used in the assignment.

PSL Over a year ago

Yup how are you attaching the events? if you use anonymous function instead of a func reference this wont work. Show your event attachment part, are you using attributes?

prime Over a year ago

@PSL i showed the event attachment part in my original question.

PSL Over a year ago

@vidudaya Yes you can use callHighlight in the removeListened. See the example in the fiddle in my prev comment.

|

RobG · Accepted Answer · 2013-10-14 02:50:02Z

1

When cloning an element, listeners added using addEventListener or by direct property assignment (element.onclick = fn;) are removed, but in–line listeners and those added using IE's attachEvent are not.

In your scenario where listeners are added by reference and also possibly using attachEvent, you are best to remove them using removeEventListener and detachEvent. So you might like to create add and remove functions like:

function addEvent(element, event, fn) {
  if (element.addEventListener) {
    element.addEventListener(event, fn, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, fn);
  }
}

function removeEvent(element, event, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(event, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + event, fn);
  }
}

Note that there are some significant differences between addEventListener and attachEvent, the most important are that in the latter, this is not set to the element whose handler is calling the function and a reference to the event isn't passed as the first argument to the listener. So the listener function ends up looking like:

function foo(evt) {
  evt = evt || window.event;
  var target = evt.target || evt.srcElement;
  ...
}

There are ways around this, but they introduce more issues. Keep it simple if you can.

answered Oct 14, 2013 at 2:50

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

Andrew Over a year ago

Looks like using solely addEventListener and removeEventListener is the way to go in the modern world: developer.mozilla.org/en-US/docs/Web/API/EventTarget/… caniuse.com/#search=removeeventlistener

Jay Harris · Accepted Answer · 2013-10-14 03:57:38Z

0

By default all event listeners are null, so simply just reset it. Problem is that all your mouseup events are registered to the body, so therefore you won't be able to drop the event without first stopping the event from bubbling to the body. You can solve that problem with, stopPropagation()

 old_element.onmouseup = function (e) {
   // event won't go up to the body tag
   e.stopPropagation();
   return null;
 };

or

 function kill (e) {
  e.stopPropagation(); 
  return null; 
 }

 old_element.onmouseup = kill;
 second_element.onmouseup = kill;

JSFIDDLE

edited Oct 14, 2013 at 3:57

answered Oct 14, 2013 at 2:38

Jay Harris

4,27120 silver badges22 bronze badges

2 Comments

RobG Over a year ago

The OP is attaching listeners using addEventListener and attachEvent. Assignment to the related property does not overwrite such listeners.

Jay Harris Over a year ago

@RobG see when you say that i get confused, bc it works in this fiddle

Collectives™ on Stack Overflow

Remove specific set of event listeners from an HTML element using JavaScript

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related