How does the jQuery .unbind() function work in JavaScript?

Question

Some background: the JavaScript function .removeEventListener() requires an explicit declaration of which handler you want to remove, while jQuery's .unbind() will automatically remove all event listeners associated with a given element.

Taking a look at the jQuery source code, i'm pretty confused as to how the .unbind() function is actually doing what it's doing. How is it removing all possible handlers associated with a given element, if it doesn't know them by name?

Edit: Sorry if I wasn't clear. My question is "how does the JavaScript source code for .unbind() work?" I know how to use .unbind(). I want to know why it works.

Answer 1

If you see jquery-1.11.js the you find your answer

jQuery.removeEvent is called lastly, when you call unbind()

jQuery.removeEvent = document.removeEventListener ?
    function( elem, type, handle ) {
        if ( elem.removeEventListener ) {
            elem.removeEventListener( type, handle, false );
        }
    } :
    function( elem, type, handle ) {
        var name = "on" + type;

        if ( elem.detachEvent ) {

            // #8545, #7054, preventing memory leaks for custom events in IE6-8
            // detachEvent needed property on element, by name of that event, to properly expose it to GC
            if ( typeof elem[ name ] === strundefined ) {
                elem[ name ] = null;
            }

            elem.detachEvent( name, handle );
        }
    };

For egs try unbind() ,

$('#selector').unbind('click',handler);

Above has elem , type , and handle in removeEventListener() : function( elem, type, handle )

Here

1. elem=$('#selector')
2. type=click
3. handle=handler

Step by step call of unbind() see jquery-1.11.1.js source

1. $('#selector').unbind('click') // calling unbind function line 8490
2. which calls off() // line 8491(calling) => line 5201(function definition)
3. Now calling event.remove() // line 5229 => line 4374
4. which calls removedata() finally where removeEventListener function is called

Answer 2

$( "#foo" ).unbind();

Unbind with no argument removes all handlers attached to the elements.

var handler = function() {
alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );

By specifying the click event type, only handlers for that event type will be unbound

Answer 3

The problem is jquery unbind remove only event handlers who bound with jquery bind, it cache all event handler bound by .bind and when you call .unbind('click') it unbind all handlers. example: if you write

function click(){}
el.bind('click', click);
el[0].addEventListener('click', click);

and then el.unbind('click') or el.unbind('click', click); it will remove only function bound by .bind, so if you use jquery you should alway use .bind to prevent unuse handlers

Answer 4

One more think if you write

el[0].addEventListener('click', click); and then

el.unbind('click', click);

jquery will remove event listener by using el[0].removeEventListener('click', click) but if you use just

el.unbind('click');

jquery will not remove your listener