Работа со всплытием событий в jQuery

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Работа со всплытием событий в jQuery</title>
     <link rel="stylesheet" href="styles.css">
     <script src="/js/jquery-3.6.0.min.js"></script>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <div>
      <button>Нажми меня</button>
     </div>
    </body>
   
   </html>

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

   body			{ border: 1px solid #ff0000; }
   div			{ border: 1px solid #00ff00; margin: 20px; }
   button		{ width: 140px; height: 30px; border: 1px solid #d0d0d0; background-color: #f0f0f0; color: #000000; outline: none; margin: 20px; }

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

   $(window).on("load", function()
   {
    $('button').bind('click', function(Event)
    {
     alert('Инициатором события '+Event.type+' был элемент '+Event.target.tagName);
     alert('Сейчас событие '+Event.type+' обрабатывается для элемента '+Event.currentTarget.tagName);
    });
    $('div').bind('click', function(Event)
    {
     alert('Инициатором события '+Event.type+' был элемент '+Event.target.tagName);
     alert('Сейчас событие '+Event.type+' обрабатывается для элемента '+Event.currentTarget.tagName);
    });
    $('body').bind('click', function(Event)
    {
     alert('Инициатором события '+Event.type+' был элемент '+Event.target.tagName);
     alert('Сейчас событие '+Event.type+' обрабатывается для элемента '+Event.currentTarget.tagName);
    });
   });

Работа со всплытием событий в jQuery

Задание:

html-документ (index.html):

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

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

Результат: