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="outer">
    outer
    <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 outer 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 shows that the default browser propagation method is bubble.

Please correct me if I’m 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.