What is event bubbling and capturing

Question

What is the difference between event bubbling and capturing  When should one use bubbling vs capturing

User · Answer

There s also the Event eventPhase property  which can tell you if the event is at target or comes from somewhere else  and it is fully supported by browsers  Expanding on the already great snippet from the accepted answer  this is the output using the eventPhase property  x000D   x000D  var logElement   document getElementById  log     function log msg      if  logElement innerHTML      lt p gt No logs lt  p gt        logElement innerHTML         logElement innerHTML       lt p gt     msg     lt  p gt        function humanizeEvent eventPhase     switch eventPhase       case 1    Event CAPTURING PHASE       return  Event is being propagated through the target s ancestor objects       case 2    Event AT TARGET       return  The event has arrived at the event s target       case 3    Event BUBBLING PHASE       return  The event is propagating back up through the target s ancestors in reverse order         function capture e      log  capture      this firstChild nodeValue trim               humanizeEvent e eventPhase       function bubble e      log  bubble      this firstChild nodeValue trim               humanizeEvent e eventPhase       var divs   document getElementsByTagName  div    for  var i   0  i  lt  divs length  i        divs i  addEventListener  click   capture  true     divs i  addEventListener  click   bubble  false     x000D  p     line-height  0     div     display inline-block    padding  5px     background   fff    border  1px solid  aaa    cursor  pointer     div hover     border  1px solid  faa    background   fdd    x000D   lt div gt 1    lt div gt 2      lt div gt 3        lt div gt 4          lt div gt 5 lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   lt button onclick  document getElementById  log   innerHTML     lt p gt No logs lt  p gt     gt Clear logs lt  button gt   lt section id  log  gt  lt  section gt  x000D   x000D   x000D

User · Answer

Event bubbling and capturing are two ways of event propagation in the HTML DOM API  when an event occurs in an element inside another element  and both elements have registered a handle for that event  The event propagation mode determines in which order the elements receive the event   With bubbling  the event is first captured and handled by the innermost element and then propagated to outer elements   With capturing  the event is first captured by the outermost element and propagated to the inner elements   Capturing is also called  trickling   which helps remember the propagation order      trickle down  bubble up   Back in the old days  Netscape advocated event capturing  while Microsoft promoted event bubbling  Both are part of the W3C Document Object Model Events standard  2000    IE  lt  9 uses only event bubbling  whereas IE9  and all major browsers support both  On the other hand  the performance of event bubbling may be slightly lower for complex DOMs   We can use the addEventListener type  listener  useCapture  to register event handlers for in either bubbling  default  or capturing mode  To use the capturing model pass the third argument as true   Example   lt div gt       lt ul gt           lt li gt  lt  li gt       lt  ul gt   lt  div gt    In the structure above  assume that a click event occurred in the li element   In capturing model  the event will be handled by the div first  click event handlers in the div will fire first   then in the ul  then at the last in the target element  li   In the bubbling model  the opposite will happen  the event will be first handled by the li  then by the ul  and at last by the div element   For more information  see   Event Order on QuirksMode addEventListener on MDN Events Advanced on QuirksMode   In the example below  if you click on any of the highlighted elements  you can see that the capturing phase of the event propagation flow occurs first  followed by the bubbling phase    x000D   x000D  var logElement   document getElementById  log    x000D   x000D  function log msg    x000D      logElement innerHTML       lt p gt     msg     lt  p gt     x000D    x000D   x000D  function capture     x000D      log  capture      this firstChild nodeValue trim     x000D    x000D   x000D  function bubble     x000D      log  bubble      this firstChild nodeValue trim     x000D    x000D   x000D  function clearOutput     x000D      logElement innerHTML       x000D    x000D   x000D  var divs   document getElementsByTagName  div    x000D  for  var i   0  i  lt  divs length  i      x000D      divs i  addEventListener  click   capture  true   x000D      divs i  addEventListener  click   bubble  false   x000D    x000D  var clearButton   document getElementById  clear    x000D  clearButton addEventListener  click   clearOutput   x000D  p   x000D      line-height  0  x000D    x000D   x000D  div   x000D      display inline-block  x000D      padding  5px  x000D   x000D      background   fff  x000D      border  1px solid  aaa  x000D      cursor  pointer  x000D    x000D   x000D  div hover   x000D      border  1px solid  faa  x000D      background   fdd  x000D    x000D   lt div gt 1 x000D       lt div gt 2 x000D           lt div gt 3 x000D               lt div gt 4 x000D                   lt div gt 5 lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt button id  clear  gt clear output lt  button gt  x000D   lt section id  log  gt  lt  section gt  x000D   x000D   x000D    Another example at JSFiddle

User · Answer

If there are two elements element 1 and element 2  Element 2 is inside element 1 and we attach an event handler with both the elements lets say onClick  Now when we click on element 2 then eventHandler for both the elements will be executed  Now here the question is in which order the event will execute  If the event attached with element 1 executes first it is called event capturing and if the event attached with element 2 executes first this is called event bubbling   As per W3C the event will start in the capturing phase until it reaches the target comes back to the element and then it starts bubbling  The capturing and bubbling states are known by the useCapture parameter of addEventListener method     eventTarget addEventListener type listener   useCapture      By Default useCapture is false  It means it is in the bubbling phase    x000D   x000D  var div1   document querySelector   div1    x000D  var div2   document querySelector   div2    x000D   x000D  div1 addEventListener  click   function  event    x000D    alert  you clicked on div 1    x000D     true   x000D   x000D  div2 addEventListener  click   function  event    x000D    alert  you clicked on div 2    x000D     false   x000D   div1  x000D    background-color red  x000D    padding  24px  x000D    x000D   x000D   div2  x000D    background-color green  x000D    x000D   lt div id  div1  gt  x000D    div 1 x000D     lt div id  div2  gt  x000D      div 2 x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Please try with changing true and false

User · Answer

I have found this tutorial at javascript info to be very clear in explaining this topic  And its 3-points summary at the end is really talking to the crucial points  I quote it here         Events first are captured down to deepest target  then bubble up  In   IE lt 9 they only bubble     All handlers work on bubbling stage excepts   addEventListener with last argument true  which is the only way to   catch the event on capturing stage     Bubbling capturing can be   stopped by event cancelBubble true  IE  or event stopPropagation     for other browsers

User · Answer

Description   quirksmode org has a nice description of this  In a nutshell  copied from quirksmode       Event capturing      When you use event capturing                     ---------------   -----------------   element1                              -----------   -----------            element2                           -------------------------                Event CAPTURING            -----------------------------------       the event handler of element1 fires first  the event handler of element2 fires last       Event bubbling      When you use event bubbling                     ---------------   -----------------   element1                              -----------   -----------            element2                           -------------------------                Event BUBBLING             -----------------------------------       the event handler of element2 fires first  the event handler of element1 fires last      What to use   It depends on what you want to do  There is no better  The difference is the order of the execution of the event handlers  Most of the time it will be fine to fire event handlers in the bubbling phase but it can also be necessary to fire them earlier

User · Answer

Bubbling    Event propagate to the upto root element is   BUBBLING      Capturing    Event propagate from body root  element to eventTriggered Element is   CAPTURING

User · Answer

As other said  bubbling and capturing describe in which order some nested elements receive a given event  I wanted to point out that for the innermost element may appear something strange  Indeed  in this case the order in which the event listeners are added does matter  In the following example  capturing for div2 will be executed first than bubbling  while bubbling for div4 will be executed first than capturing   x000D   x000D  function addClickListener  msg  num  type      document querySelector   div    num       addEventListener  click        gt  alert msg   num   type     bubble     num    gt  addClickListener  bubble    num  false   capture    num    gt  addClickListener  capture    num  true       first capture then bubble capture 1   capture 2   bubble 2   bubble 1       try reverse order bubble 3   bubble 4   capture 4   capture 3   x000D   div1   div2   div3   div4     border  solid 1px    padding  3px    margin  3px    x000D   lt div id  div1  gt    div 1    lt div id  div2  gt      div 2    lt  div gt   lt  div gt   lt div id  div3  gt    div 3    lt div id  div4  gt      div 4    lt  div gt   lt  div gt  x000D   x000D   x000D

[javascript] What is event bubbling and capturing?

Examples related to javascript

Examples related to dom-events

Examples related to event-bubbling