How to remove event from multiple elements

Question

I am trying to remove the event for my input elements.

I have the following

//add mouse up event on all element under mainDiv
addEvent('mainDiv', 'onmouseup', mouseUpFun);

//search all the input elements and remove the mouse up event 
inputs = document.getElementsByTagName('input');
    for(var i; i < inputs.length; i++){
      var input = inputs[i];
       input.removeEventListener('onmouseup');
    }

The codes above don't work and still have onmouseup event attached to it.

Can anyone help me about this issue? Thanks a lot!

check this also: http://stackoverflow.com/questions/803936/how-to-clear-remove-javascript-event-handler — , Jul 12 '13 at 23:20
If you have any other methods than `addEventListener()` attaching events in `addEvent()` function, you probably should create a corresponding `removeEvent()` too. — Teemu, Jul 12 '13 at 23:28

Vivin Paliath · Accepted Answer · 2013-07-12T23:22:20.183

3

Well, one reason might be that your loop never runs. You need to initialize i in your loop:

for(var i = 0; i < inputs.length; i++){
   var input = inputs[i];
   input.removeEventListener('onmouseup');
}

Otherwise this loop will never run due to i having the initial value of undefined.

Your call to removeEventListener also won't work as expected. You will also need to provide a reference to the listener/handler that you used.

See here for the proper usage of removeEventListener.

If everything is using mouseUpFun, you can provide that to removeEventListener:

input.removeEventListener('onmouseup', mouseUpFun);

edited Jul 12 '13 at 23:22

answered Jul 12 '13 at 23:16

Vivin Paliath

94,126
40
223
295

The best way to write that would be for(var i = 0, len = inputs.length; i < len; i++) – Casey Flynn Jul 13 '13 at 00:02
To avoid the performance drag of recalculating length for each loop iteration – Casey Flynn Jul 13 '13 at 00:02
@CaseyFlynn Is it that much of an impact? Does it have to recalculate it every time? I imagine it just has a property that is updated whenever the array is modified. I'm wary of such performance micro-optimizations. – Vivin Paliath Jul 13 '13 at 00:04
@CaseyFlynn Just ran a test-case on jsPerf and it seems like using `array.length` [is marginally faster](http://jsperf.com/for-loop-iteration-performance). – Vivin Paliath Jul 13 '13 at 00:10
I'm not sure how console.log affects the test but try this: http://jsperf.com/caching-array-length/4 – Casey Flynn Jul 13 '13 at 02:19
@CaseyFlynn Interesting. Either way, the difference is marginal such that it really doesn't matter. As I said before, it's best to be wary of micro-optimizations. – Vivin Paliath Jul 13 '13 at 18:41
I don't know if I would call an 11% improvement a micro-optimization – Casey Flynn Jul 13 '13 at 23:27
@CaseyFlynn Consider the following example: going from .001s to 0.0015s is a 50% difference, but the actual difference in time is only .0005s, which means that even after 50,000 iterations the difference is only 5s. Percentages by themselves don't tell the whole story. Code first, analyze for hotspots later, and *then* optimize. The term "micro optimizations" refers to minor optimizations that bring marginal benefit; "Premature optimization is the root of all evil". Also, take a look at [this](http://www.codinghorror.com/blog/2009/01/the-sad-tragedy-of-micro-optimization-theater.html). – Vivin Paliath Jul 14 '13 at 01:31
I just use coffeescript. Takes care of this and many other things like it. – Casey Flynn Jul 14 '13 at 23:15

score 0 · Answer 2 · answered Jul 12 '13 at 23:20

See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener

When you use removeEventListener, you need a reference to the listener function you want to remove.

Then, you could:

With your addEvent function you could save references of the listeners you add

or

You could clone the element and replace it with the clone. This way you will delete ALL event listeners (including its childs' event listeners).

How to remove event from multiple elements

2 Answers2