When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
Let’s say we have 3 nested elements : form , div, p .
<form onclick="alert('form')">form
<div onclick="alert('div')">div
<p onclick="alert('p')">p</p>
</div>
</form>
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
If we click on p tag,then see 3 alerts - p ,div,from. The process is called “bubbling”.