#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/events/event-bubbling

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/javascript/events/event-bubbling

Repovive

Event Bubbling - Events | JavaScript | Repovive

Repovive.

JavaScript22 sections · 783 units18h total

Open in Course

Event Bubbling

Events propagate up the DOM

When an event fires, it bubbles up through parent elements. A click on a button also fires on its parent div, and so on.

// Click on button bubbles to div
div.addEventListener("click", () => {
  console.log("div clicked");
});

button.addEventListener("click", () => {
  console.log("button clicked");
});
// Click button: logs both