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