Браузерные события и способы назначения их обработчиков в JavaScript

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Браузерные события и способы назначения их обработчиков в JavaScript</title>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <button onclick="alert('Обработчик события &#171;click&#187; назначен через атрибут тега <button>');">Первая кнопка</button>
     <button id="secondButton">Вторая кнопка</button>
     <button id="thirdButton">Третья кнопка</button>
    </body>
   
   </html>

   window.onload = function()
   {
    document.getElementById('secondButton').onclick = function()
    {
     alert('Обработчик события «click» назначен с использованием свойства «onclick» DOM-узла');
    };
   
    function thirdButtonEventHandler(event)
    {
     alert('Обработчик события «'+event.type+'» был назначен с использованием метода addEventListener');
     document.getElementById('thirdButton').removeEventListener(event.type, thirdButtonEventHandler);
     alert('Теперь обработчик «'+event.type+'» удален');
    };
    document.getElementById('thirdButton').addEventListener('click', thirdButtonEventHandler);
    document.getElementById('thirdButton').addEventListener('contextmenu', thirdButtonEventHandler);
   };

Браузерные события и способы назначения их обработчиков в JavaScript

Задание:

HTML–код (index.html):

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

Результат: