Capturing and Bubbling using jQuery

Event bubbling which will start executing from the innermost element to the outermost element.

Event Capturing which will start executing from the outer element to the innermost element.

But jQuery will use event bubbling. We can achieve event capturing with:

$("body")[0].addEventListener('click', callback, true);

The 3rd parameter in the addEventListener which will tell the browser whether to take event bubbling or event capturing.

By default it is false.

If it is false then it will take event bubbling. If it is true then it will take event capturing.

jQuery only uses event bubbling. If you want to add an event handler that uses the capturing model, you have to do it explicitly using addEventListener, with the third argument true as you show in the question.

Question and answers live with the following misconception: that the browser does either capture or bubble.

Truth is: the browser does always both, capture and bubble, on every click, in that order.

Is there anything similar for jQuery to denote which way to follow other than the JavaScript way? Also does jQuery uses a default phase? For example bubble?

jQuery has no event phases. The DOM has. And the DOM does always both. But jQuery registers handlers only to the bubble phase. There is no jQuery way to register to the capture phase, so bubble registration is not a default, it is the only way (with jQuery).

I don’t know if I am wrong, but this test shows that the default browser propagation method is bubble.

You are wrong, if I’m allowed to say. When you click on the outer div, capture happens, until it reaches the outer div, then bubble... It just does not go any deeper than the actual target of the event.

If you click the inner div, capture passes the outer div, but no handler is registered there for that phase, then it reaches the target, and on the way back up (bubble) it triggers the outer div handler.—I haven’t run your code, but it would be hard to tell which one happened first (the inner is first).

(Note: once the target is reached, the phase is actually called “target phase” and handlers are called independent of which phase they registered for (in registration order, btw).)