What is bubbling in javascript in HTML

form.onclick = function(event) {
event.target.style.backgroundColor = 'yellow';

// chrome needs some time to paint yellow
setTimeout(() => {
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = ''
}, 0);
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">

A click shows both <code>event.target</code> and <code>this</code> to compare:

<form id="form">FORM

<!-- A handler on a parent element can always get the details about where it actually happened.

The most deeply nested element that caused the event is called a target element, accessible as event.target.

Note the differences from this (=event.currentTarget):

event.target – is the “target” element that initiated the event, it doesn’t change through the bubbling process.
this – is the “current” element, the one that has a currently running handler on it.
For instance, if we have a single handler form.onclick, then it can “catch” all clicks inside the form. No matter where the click happened, it bubbles up to <form> and runs the handler.

In form.onclick handler:

this (=event.currentTarget) is the <form> element, because the handler runs on it.
event.target is the actual element inside the form that was clicked. -->

Source: javascript.info

p {
line-height: 0;

div {
padding: 5px;

background: #fff;
border: 1px solid #aaa;
cursor: pointer;

div:hover {
border: 1px solid #faa;
background: #fdd;

Source: stackoverflow.com

<button id="clear">clear output</button>
<section id="log"></section>

Leave a Comment