What's the good reason for removing an event after using it in javascript or unbinding after binding it in jquery?

Question

What's the good reason for removing an event handler after using it in javascript or unbinding after binding it in jQuery?

for example, binding and unbinding in jQuery..

$( "#foo" ).bind( "click.myEvents", handler );   
$( "#foo" ).unbind( "click.myEvents", handler );

Or in javascript,

document.getElementById("myDIV").addEventListener("mousemove", myFunction);
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

Answer 1

The uses for this can be many and truly depends on your use case. Sometimes you only want an event to run once and you unbind after running your event listener finishes its function.

In certain apps such as a backbones app it comes down to performance. For example events that are bound to a view let's say, a view for an about page, will be persistant.

Let's say you want to switch between your about view to your "home" view. In backbone the events you define will still exist in memory even if you destroy the object they are bound to within the Dom. In the this case you will have a remove method, or something similar, that will unbind those events for your view object. This is extremely useful for a complex app. But these are only two examples. It's merely a tool and with that you can provide functionality for a large plethora of cases.

Answer 2

The main reason to remove an event listener is when you no longer want to be notified of that event, even if it occurs again in the future. This is not the most common behavior and you generally do NOT need to remove event handlers after they fire. For example, removing a button click event handler after it fires would render the button inoperable going forward.

There are examples of a situation where you might want to remove an event handler. A most common one might be that you're registering an event handler for the end of a specific CSS animation sequence. The code that is running now wants to know when the current animation is done, but there may be other animations running later in the program on this element and this code does not want to know about them. So, you install the event handler now when you kick off the animation and then when it fires, you remove the event listener.

FYI, jQuery offers the .one() version of .on() which will automatically remove the event handler after it fires. I use that extremely rarely. Generally I want an event handler (particularly click or key event handlers) installed for the duration of the lifetime of the page.

Answer 3

In general, if you don't need the event listener any longer, it is safe (or even preferred) that it would be removed/unbound. This may be due to a change in conditions on the page, or simply because you only want the event to be run a finite number of times.

One potential case: a website loading views via asynchronous requests where DOM elements may be loaded/unloaded without a full page refresh.

Other conditions where an event listener is no longer required, you can unregister (or unbind) the event in order to remove the listeners from memory. This can improve webpage performance.

Answer 4

In a dynamic app you might load several screens without needing to refresh the page. When you initialize a new screen you might want to start listening for events. Now if you load a different screen (into the same tags) you'll end up with multiple listeners for the same event. This might cause a series of events to fire when you only want one.

So some offensive code might look like this:

var loadScreen1 = function(){
    $(".content").html("<p>Screen 1</p>");
//  uncomment the following to "fix"
//  $("#toggler").unbind('click');
    $("#toggler").click(toggleScreen);

    $(".history").append(" -1- ");
}

var loadScreen2 = function(){
    $(".content").html("<p>Screen 2</p>");
//  uncomment the following to "fix"
//  $("#toggler").unbind('click');
    $("#toggler").click(toggleScreen);
    $(".history").append(" -2- ");
}

var currentScreen = 1;

var toggleScreen = function(){
    if (currentScreen == 1){
        loadScreen2();
        currentScreen = 2;
    } else {
        loadScreen1();
        currentScreen = 1;
    }
}

loadScreen1();

Here is a fiddle where something like this can go terribly wrong:

http://jsfiddle.net/9D4J5/1/

Answer 5

You can use bind() to associate new behavior with an element, which can be removed later with unbind(); in other words you can create a temporary behavior for a element.

e.g.

• make an element clickable based on a condition
• add a different mouseover tooltip to an element based on user actions
• make a submit button defunct after a timeout
• be notified of events now, but that you don't care about later (= temporary behavior right?)
• modify keyboard event handlers based on context
• cancel an action that will fire a bunch of events that will no longer be applicable
• ...