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”.
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”.