why event bubling do not work with tags h1 h2 … Can you tell me why?

in my body i used these tags

<div class="DIV" onclick="alert(1)">DIV
  <h1 class="h1" onclick="alert(2)">H1
    <h2 class="h2" onclick="alert(3)">H2
      <h3 class="h3" onclick="alert(4)">H3
        <p class="p" onclick="alert(5)">P</p>
      </h3>
    </h2>
  </h1>
</div>

i wanted to see 1 2 3 4 5 but i saw 5 4 1

When i used only tag div it worked: 5 4 3 2 1

<div class="DIV" onclick="alert(1)">DIV
  <div class="h1" onclick="alert(2)">H1
    <div class="h2" onclick="alert(3)">H2
      <div class="h3" onclick="alert(4)">H3
        <p class="p" onclick="alert(5)">P</p>
      </div>
    </div>
  </div>
</div>

I was looking for information, but I didn’t find anything about it