43

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 5

33

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

0
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

15
  • 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, 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
  • 5
    This answer is nonsense. All events are specific to one element. Am I wrong? Name one that isn't.
    – doug65536
    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.
    – user578895
    Oct 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_w
    Dec 13, 2014 at 13:54
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

1
  • 1
    New link to List of events from MDN. Could not edit the post hence the comment.
    – Murali KG
    Jun 27, 2017 at 18:35
3

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.

2

focus and blur events do not bubble

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.