HTML DOM: Which events do not bubble?

Question

Most events bubble in all browsers. However, I know that in Internet Explorer "submit" events do not bubble. What are the other events that do not bubble?

Solution 1

Any events specific to one element do not bubble: focus, blur, load, unload, change, reset, scroll, most of the DOM events (DOMFocusIn, DOMFocusOut, DOMNodeRemoved, etc), mouseenter, mouseleave, etc

Solution 2

HTML frame/object

• load
• unload
• scroll (except that a scroll event on document must bubble to the window)

HTML form

• focus
• blur

Mutation

• DOMNodeRemovedFromDocument
• DOMNodeInsertedIntoDocument

Progress

• loadstart
• progress
• error
• abort
• load
• loadend

From: https://en.wikipedia.org/wiki/DOM_events#Events

Solution 3

I can't list all the events that do not bubble.

But I find a good site that can help you to check if the events can bubble or not.

@MDN event.bubbles

Solution 4

In addition to the rest answers, the load event on document elements bubbles, but it stops bubbling at the Document object and does not propagate on to the Window object. The load event of the Window object is triggered only when the entire document has loaded.

Solution 5

focus and blur events do not bubble

View more solutions

Comments

[Phrogz]

Having "etc." in an answer asking for an explicit list seems a little sketchy. What does "mouseenter, mouseleave, etc." mean? Is mouseover included? Further: can you provide a citation for this information?

[Beetroot-Beetroot]

+1 to @Phrogz. For the record, we learn here that mouseenter is "similar to mouseover, it differs in that it doesn't bubble and that it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space".

[doug65536]

This answer is nonsense. All events are specific to one element. Am I wrong? Name one that isn't.

[None]

@doug65536 -- First, please don't post antagonistic comments on 2.5 year old posts. Second, no, you're wrong. Things like "click" are not tied to an element conceptually. They are conceptually tied to a region of the screen, but in practice tied to a DOM tree. That is the entire point of bubbling, that you can capture events on higher nodes. If you click a block of text, you're also clicking the 20 nodes above it. If you focus on an input, you're just focusing on that ONE element, or leaving that ONE element, or changing that ONE element, etc.

[Matt Molnar]

Submit appears to bubble in Chrome, also checked in ie9: jsfiddle.net/8HaJ4

[bhavya_w]

@zyklus " If you focus on an input, you're just focusing on that ONE element, or leaving that ONE element, or changing that ONE element, etc " IMHO...if the event doesnt bubble...it means we cannot listen to it in bubbling phase of the event flow...but we can listen to it capturing phase of event flow...All the elements get focussed in hierarchy upto the document level.

[SuperUberDuper]

you can also add in 'copy'

[Murali KG]

New link to List of events from MDN. Could not edit the post hence the comment.

[Ali Shakiba]

Currently change event bubbles, but I don't from when it is added?!

[None]

@AliShakiba - I have no idea what your comment means

[Zenexer]

A good number of the events listed here have bubbled for as long as I can remember, so this answer is blatantly inaccurate. Even the slightest bit of Googling confirms this; for example, the following do bubble, despite the claim in the answer: mouseenter, mouseleave, submit

[None]

@Zenexer -- Your comment is blantently inaccurate. mousenter, mouseleave, and submit do not bubble. Google better.

[Zenexer]

@MarkKahn My apologies, you appear to be right. I was thinking of mouseover. However, it does appear that submit bubbles: developer.mozilla.org/en-US/docs/Web/Events/submit This is actually the event in which I was most interested. MDN makes it sound as though the spec specifies that it shouldn't bubble, but that all browsers have it bubble. I haven't tested it, though.

[None]

@Zenexer -- I just tested this and wtf?? Submit bubbles from a form and fires on a div??? That makes zero sense and there's literally no reason anyone should ever be listening for a submit event on anything but a form, but you're right. I consider this a bug in the spec though. fwiw if you nest forms (invalid HTML, but for the sake of argument...) it only fires on the top-most form, so it doesn't even make sense to try and bubble from form to form. This is just utterly ridiculous behavior

[Zenexer]

I’ve found it pretty useful. For example, say I have certain forms that I always want to submit via Ajax; I can just listen for submit on window instead of worrying about adding a listener to each form (I hope).

[Ferdinand Prantl]

The "change" event bubbles and is documented to do so. And so does the "scroll" event. The rule "specific to one element" is misleading. If you need to know if an event bubbles, you should check its documentation.