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.

@adeneo How does that question address what jQuery does? The OP seems to understand what bubbling and capture are, he just wants to know how it relates to jQuery. — Barmar, Jul 05 '14 at 11:24
@Barmar - wasn't sure, which is why I didn't close, I thought maybe the OP needed an explanation of that capture was, as it doesn't really relate to jQuery at all since jQuery hardcodes 'false' for addEventlistener when it's called, and there's no option to change it as capture is generally never used. — adeneo, Jul 05 '14 at 12:51

Barmar · Accepted Answer · 2019-05-14T15:21:37.280

64

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.

edited May 14 '19 at 15:21

answered Jul 05 '14 at 11:28

Barmar

741,623
53
500
612

score 6 · Answer 2 · edited Apr 04 '18 at 07:51

6

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.

edited Apr 04 '18 at 07:51

Bugs

4,491
9
32
41

answered Apr 03 '18 at 10:31

Vijay Ramesh

413
1
7
13

1

You can apply $("body").get(0) too it's the same as $("body")[0] which lets you use jquery to work with javascript native features. – Muhammad Musavi Apr 15 '18 at 07:55

score 5 · Answer 3 · answered Apr 11 '20 at 11:12

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).)

score 1 · Answer 4 · answered Jan 31 '22 at 14:31

Every Event is going first through "capturing" phase and then through "bubbling" phase.

For instance, when user clicks on <a>, all event handlers bound using "capturing" (third argument in addEventListener method set to true, not supported in jQuery) are called starting from outermost <html> all the way down to the link. Then, the "bubbling" phase starts and all event handlers using "bubbling" (supported in jQuery) are called the opposite way - from link back to the <html>.

You can try it on your own, firing this code in developer tools and clicking anywhere on your site.

document.querySelectorAll("*").forEach(it => {
   it.addEventListener("click", function() {console.log("capturing: ", it)}, true); 
   it.addEventListener("click", function() {console.log("bubbling: ", it)}, false); 
});

score -1 · Answer 5 · answered Dec 16 '19 at 18:59

The event is triggered in event bubbling on the element on to which the user has clicked,and unless we call .stopPropagation() on the event object the event is then triggered all the way up the DOM. Default is event bubbling set in Jquery in order to use Capture ypu need to set parameter as true in .addEventListner

Capturing and Bubbling using jQuery

5 Answers5

Linked