CODEWITHSUNDEEP
javascriptjqueryhtmlevent-bubblingpropagation
christostsang
christostsang

Reputation: 1841

Capturing and Bubbling using jQuery

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.

Upvotes: 40

Views: 40298

Answers (5)

luke
luke

Reputation: 3599

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); 
});

Upvotes: 1

Robert Siemer
Robert Siemer

Reputation: 34771

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

Upvotes: 5

Rashi Goyal
Rashi Goyal

Reputation: 941

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

Upvotes: -1

Barmar
Barmar

Reputation: 782785

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.

Upvotes: 66

Vijay Ramesh
Vijay Ramesh

Reputation: 433

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.

Upvotes: 7

Related Questions