Remove event listener in JavaScript

Question

I add an event listener to an element:

/* sitepoint.com/javascript-this-event-handlers */
function AttachEvent(element, type, handler){
    if (element.addEventListener){
        element.addEventListener(type, handler, false);
    }else{
        element.attachEvent("on"+type, handler);
    }
}

window.addEventListener("load", function() {
    var els = getElementsByClassName('name', 'img');
    var elsnum = els.length;
    if(elsnum) //found
    {
        var i = 0;
        for(i=0; i < elsnum; i++)
        {
            var the_els = els[i];
            AttachEvent(the_els, "click", myfunction); 
        }
    }
}, false);

Later in myfunction, I want to remove the handler again, to prevent duplicate clicks:

function myfunction(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;  

    //more code
    //...

    //remove click handler
    target.removeEventListener('click', e, false);

    //more code
    //...
}

The event listener is not being removed, though. When I click on one of the elements, the code of myfunction is executed again. How can I remove the event listener to prevent the clicked element from being clicked again?

PS: I do not use jQuery.

If you want an easier implementation, read my answer way down on the bottom. ;) — TERMtm, Jan 12 '12 at 22:01
Possible duplicate of [JavaScript: remove event listener](https://stackoverflow.com/questions/4402287/javascript-remove-event-listener) — Heretic Monkey, Jun 11 '19 at 14:13

score 15 · Accepted Answer · answered Jan 12 '12 at 19:38

15

I believe you're almost there, but you have to pass the listener to removeEventListener, not the event itself. So try:

target.removeEventListener('click', myFunction, false);

answered Jan 12 '12 at 19:38

bfavaretto

71,580
16
111
150

You're welcome! Don't forgot to handle IE with `element.detachEvent`. If in doubt, take a look a the quirksmode link @John posted, it's an excellent article on this topic. – bfavaretto Jan 12 '12 at 19:52

TERMtm · Answer 2 · 2012-01-12T20:40:54.573

Use element.removeEventListener(type, listener, useCapture) Remember to use that on the same element, and give it the exact same parameters as you did for adding.

One excellent way to code this would be to make a function that stores the listener details in a variable, mimicking how setTimeout() works for instance, and adding that to the element prototype. Here's an example function.

HTMLElement.prototype.eventListener=
function(type, func, capture){
   if(typeof arguments[0]=="object"&&(!arguments[0].nodeType)){
      return this.removeEventListener.apply(this,arguments[0]);
   }
   this.addEventListener(type, func, capture);
   return arguments;
}

That will add a method to all HTML nodes that already can accept event listners, and allow you to do this.

var a=element.eventListener('click', myFunction, false); //to add
element.eventListener(a); //to remove

Luke Shaheen · Answer 3 · 2012-01-12T19:40:14.390

2

http://www.quirksmode.org/js/events_advanced.html

To remove an event handler, use the removeEventListener() method.

Also see http://help.dottoro.com/ljahxbsx.php

object.removeEventListener (eventName, listener, useCapture);

listener - Required. Reference to the event handler function to remove. You need to pass what listener you want to remove.

edited Jan 12 '12 at 19:40

answered Jan 12 '12 at 19:34

Luke Shaheen

4,262
12
52
82

Remove event listener in JavaScript

3 Answers3

Linked