Direct vs delegation and bubbling vs capturing in jQuery

Question

HTML

<div>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

jQuery

$('div span').on('click', function(){
  //direct - 1st method
});

$('div').on('click','span', function(){
  //delegation - 2nd method
});

I have used both above method in my code. I know second method is better due to it has only got single handler. My problems are:

1. Is first method (direct) refers to the concept called event capturing? Is it an example for event capturing?
2. Is second method (delegation) refers to the concept called event bubbling? Is it an example for event bubbling?

Answer 1

It appears as though All jQuery event methods use Event Bubbling, not Event Capturing.

Therefore, both of your examples will use Event Bubbling.

There is an edge case with focus and blur events not bubbling in some browsers. In the affected browsers, Event Capturing is used for focus and blur events.

---

For reference, you can simply view the source. http://code.jquery.com/jquery.js

Answer 2

$('div span').on('click', function(){
  //direct - 1st method
});

This event only attached the event handler to the spans inside Div that are currently present in the DOM.. i.e; if a new span element is added to the div , that span will not have a click event associated with it..

The first and second one are example's of Event Bubbling

There comes the concept of Event delegation where in the ancestor is given the event handler and it is delegated to the children..

The second example is an example of event delegation . Wherein event is attached to the parent element..So all the span element's inside the div class are attached to the event handler ..

So if a new span element is added to the div , becoz the event is associated with the span's ancestor the event will fire in this case

This helps in cases

$('div').on('click','span', function(){
  //delegation - 2nd method
});

I have no idea where event capturing is used in the jQuery library

Answer 3

Answers to your questions:

1. This isn't bubbling, capturing, or delegating. It's just adding an event listener directly to an element.

2. Yep, this is delegation that under the hood relies on clicks bubbling up.

Event bubbling and capturing are different implementations of the same concept, brought to you by Microsoft and Netscape, respectively. Both listening for events on parent elements. Note that they occur in a different order: capturing happens from the parent down to descendent, whereas bubbling happens the other way around.

More details and its history on PPK's website: http://www.quirksmode.org/js/events_order.html

Modern browsers support both capture and bubbling (bubbling is the default now), and you can specify which one you want to use when you use the native addEventListener:

element.addEventListener('click', function(){}, false); // bubble element.addEventListener('click', function(){}, true); // capture

However, some events, such as focus, blur, scroll, mouseover, etc only are supported through capture phase events, so you MUST specify "true" when you use addEventListener.

Unfortunately, it looks like jQuery doesn't support delegation for all capture phase events, only focus and blur (see https://github.com/jquery/jquery/blob/ad032d3c7df04827989a4187117614c29bf3a4ad/src/event.js#L728).

The short answer: for delegation of capture-phase events other than focus and blur, you need to use the native addEventListener, not jQuery.