Всплытие и погружение браузерных событий, прерывание передачи событий в JavaScript

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Всплытие и погружение браузерных событий, прерывание передачи событий в&nbsp;JavaScript</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <span><b>Всплытие событий:</b></span><br><br>
     <form id="firstForm">
      FORM
      <div id="firstDiv">
       DIV
       <p id="firstParagraph">P</p>
      </div>
     </form>
   
     <br><br><span><b>Прерывание передачи события:</b></span><br><br>
     <form id="secondForm">
      FORM
      <div id="secondDiv">
       DIV (прекращение всплытия)
       <p id="secondParagraph">P</p>
      </div>
     </form>
   
     <br><br><span><b>Погружение событий:</b></span><br><br>
     <form id="thirdForm">
      FORM
      <div id="thirdDiv">
       DIV
       <p id="thirdParagraph">P</p>
      </div>
     </form>
    </body>
   
   </html>

   window.onload = function()
   {
    document.getElementById('firstForm').onclick = function(event) { alert(this.tagName); };
    document.getElementById('firstDiv').onclick = function(event) { alert(this.tagName); };
    document.getElementById('firstParagraph').onclick = function(event) { alert(this.tagName); };
   
    document.getElementById('secondForm').onclick = function(event) { alert(this.tagName); };
    document.getElementById('secondDiv').onclick = function(event) { alert(this.tagName); event.stopPropagation(); };
    document.getElementById('secondParagraph').onclick = function(event) { alert(this.tagName); };
   
    document.getElementById('thirdForm').addEventListener('click', function(event) { alert(event.currentTarget.tagName); }, true);
    document.getElementById('thirdDiv').addEventListener('click', function(event) { alert(event.currentTarget.tagName); }, true);
    document.getElementById('thirdParagraph').addEventListener('click', (event) => { alert(event.currentTarget.tagName); }, true);
   };

Всплытие и погружение браузерных событий, прерывание передачи событий в JavaScript

Задание:

HTML–код (index.html):

CSS–разметка (styles.css):

JS–скрипты (scripts.js):

Результат: