Главная страница / Занятия / #7 / Генерация пользовательских событий в JavaScript

Генерация пользовательских событий в JavaScript

Задание:

Показать, как генерируются пользовательские события в JavaScript.

HTML–код (index.html):

   <!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>
     <button id="autoclickButton">Кнопка с автокликом</button>
     <div id="clickDiv"></div>
    </body>
   
   </html>

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

   #clickDiv		{ margin-top: 30px; width: 100px; height: 100px; background-color: #ff0000; }

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

   window.onload = function()
   {
    let myClickEvent = new Event('click');
   
    document.getElementById('autoclickButton').onclick = () => { alert('Кнопка нажата'); };
    document.getElementById('clickDiv').onmouseover = () => { document.getElementById('autoclickButton').dispatchEvent(myClickEvent); };
   };

Результат:

Результат выполнения задания можно посмотреть здесь.