Wednesday, February 13, 2013

Removing an event listener from an element

Today I was working while I was asked how to remove an event listener from an element which had an
  click event. At first I didn't really remember how to do it, so I Googled a bit and I found this way:


document.getElementById("your_element_id").addEventListener('click', function(){
    //do something
    this.removeEventListener('click',arguments.callee,false); 
}, false);

As you can see, all the work is done by addEventListener and removeEventListener functions. The first one takes as parameter the event (click in this case) and a function that instruct the event listener on what it has to do with that event. The third argument specifies whether the EventListener being removed was registered as a capturing listener or not (set false by default).

The function removeEventListener takes basically the same input parameters. In the element that has to remove, it specifies which element (click), which function (in this case I use arguments.callee as callee is a property of the arguments object and it can be used to refer to the currently executing function), and the third argument that specifies if it was registered as a capturing listener or not.

Of course there are simpler way to do this. It turned out that who asked me how to remove an event listener from an element was using jQuery. In that case the code looks even simpler:


$('#your_element_id').unbind();
//or
$('#foo').unbind('click');
//or
$('#foo').unbind('click', function() {
   //do something
});
//or
$('#foo').unbind('click', function() {
   //do something
}, false);


As the previous examples, also in this case there are three parameters. jQuery is smart enough to take all the three possibilities as fine. The first one will remove every listener binded. The second one every function binded to that listener, the third one will remove that particular function binded to that particular event, while the fourth one just specifies the third argument that by default is false.
And that's it. Pretty easy.
Categories: ,

1 comment:

  1. Other touches include a simple date readout at replica watches uk circular cyclops, sapphire crystal with replica watches, and a cool handset with a segmented pattern for the minutes hand. My favorite aspect of this swiss replica watches is the way it all complements the glossy aluminum bezel and its thick coinedge pattern. Now, whether the in house movement paired with silicone tech in a vintage inspired diver is worth the price rolex replica uk is totally up to the buyer but this watch is going to have some pretty stiff competition. When this hits the grey market it will be a competative purchase. I love the overall rado replica uk of it, stunning, it grabbed me straight away and I fell in love with it. It even the first cyclops replica watches that I am considering putting on the dream list. Diver replica watches uk and test the quality and practicality of the newer independent watch company.

    ReplyDelete