jQuery event bubbling

问题

I want to understand how exactly to interpret bubbling. Does it mean going up the HTML code hierarchy or something else?

Secondly, I was going through an example and I could not understand the last part where it says

The P-based click handler listens for the click event and then prevents it from being propagated (bubbling up)

What does this mean?

回答1:

return false;

will prevent "bubbling". It's used to stop default actions like checking a checkbox, opening a select, a click, etc.

To stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

From Caveats in jQuery .live()

---

Reasoning (thanks to @AlienWebguy):

The reason stopPropagation() doesn't work with live() is that live() binds the event to document so by the time it fires there's no where else for it to propagate.

回答2:

The concept of "bubbling up" is like if you have a child element with a click event and you don't want it to trigger the click event of the parent. You could use event.stopPropagation().

event.stopPropagation() basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.

Event Capturing:

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Event Bubbling:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

If you are using live() or delegate() you will need to return false;, though it may not work. Read the quote below.

Per jQuery docs:

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

In the past it was a platform issue, Internet Explorer had a bubbling model, and Netscape was more about capturing (yet supported both).

The W3C model calls for you be able to choose which one you want.

I think bubbling is more popular because, as stated there are some platforms that only support bubbling...and it sort of makes sense as a "default" mode.

Which one you choose is largely a product of what you are doing and what makes sense to you.

More info http://www.quirksmode.org/js/events_order.html

Another great resource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

回答3:

What it says is that the live () method attach a handler to the document element and check the target of the event to see where it comes from. If the target match the selector, then it fires the eventHandler. All that repose on the bubbling event system.

In the example, the click handler on the p element, witch is an ancestor of the a element, cancel the bubbling by returning false. Then the document element will never receive the event, so it will not trigger the event handler.

回答4:

In the below example it is attaching a click event to anchor with id "anchor". This anchor is within a div which also has a click event attached. If we click on this anchor it is as good as we are clicking on the containing div. Now if we want to do some stuff on this anchor click but do not want the div's click to be fired we can stop the event bubling as below.

<div id="div">

<a href="google.com" id="anchor"></a>

</div>


$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.

   //Do stuff here

});

$("#anchor").click(function(e){

   //Do stuff here

   //This line stops the event bubling and 
   //jquery has abstracted it in the event object to make it cross browser compatible.
   e.stopPropagation();
});

回答5:

Also:

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

回答6:

Yes, the event goes up the tree and if any element has a handler for that event it will be called. By adding return:false in a handler of one of the elements the event will be prevented from bubbling.

回答7:

These two links provide clear and elaborate explanation on event bubbling (as well as commonly used event concepts).

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

From the first link

event will be triggered for the a element as well as for all of the elements that contain the a — all the way up to the document

From the second link

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

Lets assume we click the span, which causes a click event to be fired on the span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the span (the ), and a click event is fired on that. This process repeats for the next parent (or ancestor) up to the document element.

Now let's put all this into the context of a DOM. The DOM is a... tree and each element is a node in the DOM tree. Bubbling is then merely the traversal of a node, some element to the root node, document (follow your parent until you can't anymore)

来源：https://stackoverflow.com/questions/6945856/jquery-event-bubbling