< Back to JavaScript 30

Event Capture, Propagation, Bubbling and Once

• Project Synopsis and Code

  In this lesson I learned about Event capture, Propagation, Bubbling, and Once.

  Event Capture - When the user makes a 'click', the event ripples top to bottom from the document (root), and CAPTURES each element as it makes its way to the element that fired the event.

  Bubbling - When the Event Capture is complete, it then starts to bubble up (bottom to top). Starting at the current DOM <element>, then proceeding on to its parent <element>, one at a time, until it gets back up to the document level (root).

  In this project I listen on each <div> for 'click' and run a function that logs the class of that <div>. The output shows that when clicking on '.three', 'this' bubbles 'three', 'two', 'one' which shows that the event is moving up the chain of <div> nodes.

  Propagation - What continues the chain for Bubbling (bottom to top). To stop Propagation on the event use (e.stopPropagation()).

  Once - Only fire this event once. In this project I listen for a 'click' event on the <button>, and run a function that alerts the user. I use (once: true) to ensure the event only fires one time.

  See the Pen JavaScript30 - 25 - Event Capture, Propagation, Bubbling and Once by Corey Noble (@CoreyNoble) on CodePen.