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?
5 Answers
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...">
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
-
38Having "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?– PhrogzNov 15, 2012 at 0:37 -
2+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". Mar 5, 2013 at 1:44
-
5This answer is nonsense. All events are specific to one element. Am I wrong? Name one that isn't. Oct 8, 2013 at 1: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.– user578895Oct 10, 2013 at 3:49
-
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_wDec 13, 2014 at 13:54
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.
-
1New link to List of events from MDN. Could not edit the post hence the comment. Jun 27, 2017 at 18:35
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.