Capturing and Bubbling using jQuery

Question

I am new to jQuery and I'm trying to understand the concept of capturing and bubbling.

I have read a lot of articles, but most of them described event propagation for Javascript.

Lets assume we have the following HTML code:

<div id="outter">

        outter

        <div id="inner">

                inner
        </div>

</div>

Capturing is the phase where we go down the DOM elements and bubbling is when we go up.

In Javascript you can decide which way to follow (using true or false parameters):

element.addEventListener('click',doSomething,true) --> capture phase
element.addEventListener('click',doSomething,false)  --> bubble phase

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?

Because i used the following code to test this:

css

<style>

  div {
            border: 1px solid green;
            width: 200px;

       }

</style>

jQuery

<script>

    $(document).ready(function(){

        $('div').click(function(){
            $(this).animate({'width':'+=10px'},{duration: 3000})
        });

    });

</script>

It appears that when I click on the outter div, only that div animates to a larger div. When I click to the inner div both divs animate to larger divs.

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

Please correct me if i am wrong.

Answer 1

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.

Answer 2

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.