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?

score 33 · Answer 1 · edited May 25 '22 at 12:34

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

In order to check whether an event bubbles up through the DOM tree or not, you should check the read-only bubbles property available on the Event object and its instances.

"The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not."

In the following code example, you can check how the 'focus' event can only be tracked during the capturing phase from an event listener attached high in the DOM hierarchy (document.body) but not during the bubbling phase. The click event on the other hand, can be captured in both directions (capturing + bubbling phases).

// Check if the click event bubbles:
document.querySelector("input").addEventListener("click", e =>{
  console.log(`Does the ${e.type} event bubble?`, e.bubbles);
}, { once: true });
// Check if the focus event bubbles:
document.querySelector("input").addEventListener("focus", e =>{
  console.log(`Does the ${e.type} event bubble?`, e.bubbles);
}, { once: true });

// Track focus event during the bubbling phase (at least trying to):
document.body.addEventListener("focus", e =>{
  console.log(`Tracking ${e.type} event during bubbling phase.`);
});

// Track focus event during the capturing phase:
document.body.addEventListener("focus", e =>{
  console.log(`Tracking ${e.type} event during capturing phase.`);
}, { capture: true })

// Track click event during the bubbling phase:
document.body.addEventListener("click", e =>{
  console.log(`Tracking ${e.type} event during bubbling phase.`);
});

// Track click event during the capturing phase:
document.body.addEventListener("click", e =>{
  console.log(`Tracking ${e.type} event during capturing phase.`);
}, { capture: true })

<input placeholder="Focus or click...">

score 15 · Accepted Answer · 2018-09-28T13:37:56.907

15

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

edited Sep 28 '18 at 13:37

answered Apr 07 '11 at 03:22

38

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? – Phrogz Nov 15 '12 at 00:37
2

+1 to @Phrogz. For the record, we learn [here](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter) 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". – Beetroot-Beetroot Mar 05 '13 at 01:44
5

This answer is nonsense. All events are specific to one element. Am I wrong? Name one that isn't. – doug65536 Oct 08 '13 at 01:56
14

@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. – Oct 10 '13 at 03:49
Submit appears to bubble in Chrome, also checked in ie9: http://jsfiddle.net/8HaJ4/ – Matt Molnar Apr 08 '14 at 16:16
1

@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. – bhavya_w Dec 13 '14 at 13:54
you can also add in 'copy' – SuperUberDuper Mar 07 '16 at 14:34
Currently change event bubbles, but I don't from when it is added?! – Ali Shakiba Aug 30 '17 at 01:28
@AliShakiba - I have no idea what your comment means – Aug 31 '17 at 09:44
1

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 – Zenexer Sep 27 '18 at 11:48
@Zenexer -- Your comment is blantently inaccurate. mousenter, mouseleave, and submit do *not* bubble. Google better. – Sep 28 '18 at 00:19
@MarkKahn My apologies, you appear to be right. I was thinking of mouseover. However, it does appear that submit bubbles: https://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. – Zenexer Sep 28 '18 at 00:29
@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 `form`s (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 – Sep 28 '18 at 13:37
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). – Zenexer Sep 28 '18 at 18:52
The "change" event bubbles and [is documented to do so](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event). And so [does the "scroll" event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event). The rule "specific to one element" is misleading. If you need to know if an event bubbles, you should check its documentation. – Ferdinand Prantl Apr 01 '21 at 10:48

score 8 · Answer 3 · answered Apr 07 '11 at 03:19

8

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

answered Apr 07 '11 at 03:19

ace

6,775
7
38
47

1

New link to [List of events](https://developer.mozilla.org/en-US/docs/Web/Events) from MDN. Could not edit the post hence the comment. – Murali KG Jun 27 '17 at 18:35

score 3 · Answer 4 · answered Apr 25 '16 at 13:05

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.

score 2 · Answer 5 · answered Apr 07 '11 at 00:18

2

focus and blur events do not bubble

answered Apr 07 '11 at 00:18

kennebec

102,654
32
106
127

HTML DOM: Which events do not bubble?

5 Answers5

HTML frame/object

HTML form

Mutation

Progress

Linked