1

hey guys i was just going through the Jquery doc's and basically came across the following peice of code : 

jQuery.event.special.pushy = {
    bindType: "click",
    delegateType: "click"
};

the doc's has the following explanation for bindType and delegateType,

When defined, these string properties specify that a special event should be handled like another event type until the event is delivered. The bindType is used if the event is attached directly, and the delegateType is used for delegated events. These types are generally DOM event types, and should not be a special event themselves.

now i don't understand the following :

The bindType is used if the event is attached directly, and the delegateType is used for delegated events.

what is attached directly and delegated events ??

Thank you .

Alex-z

Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174

1 Answers1

1

Consider an example from this brilliant article:

HTML

<html>
<body>
<div id="container">
    <ul id="list">
        <li><a href="http://domain1.com">Item #1</a></li>
        <li><a href="/local/path/1">Item #2</a></li>
        <li><a href="/local/path/2">Item #3</a></li>
        <li><a href="http://domain4.com">Item #4</a></li>
    </ul>
</div>
</body>
</html>

JS (direct bind)

// Attach a directly bound event handler
$( "#list a" ).on( "click", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

JS (delegated bind)

// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

dekkard
  • 6,121
  • 1
  • 16
  • 26
  • Another reference, on SO: http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on – dekkard Apr 22 '15 at 22:10