Работа с событиями мыши, клавиатуры и прокрутки в JavaScript

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Работа с событиями мыши, клавиатуры и прокрутки в JavaScript</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <div id="myDiv"></div>
     <textarea id="myTextArea"></textarea>
    </body>
   
   </html>

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

   html			{ width: 100%; height: 200%; }
   #myDiv		{ margin-top: 30px; width: 100px; height: 100px; background-color: #ff0000; }
   #myTextArea		{ margin-top: 30px; width: 500px; height: 300px; }

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

   window.onload = function()
   {
    document.getElementById('myDiv').onmousemove = () => { document.getElementById('myTextArea').innerHTML += 'mousemove|' };
    document.getElementById('myDiv').onmouseover = () => { document.getElementById('myTextArea').innerHTML += 'mouseover|' };
    document.getElementById('myDiv').onmouseout = () => { document.getElementById('myTextArea').innerHTML += 'mouseout|' };
    document.getElementById('myDiv').onmousedown = () => { document.getElementById('myTextArea').innerHTML += 'mousedown|' };
    document.getElementById('myDiv').onmouseup = () => { document.getElementById('myTextArea').innerHTML += 'mouseup|' };
    document.getElementById('myDiv').oncontextmenu = () => { document.getElementById('myTextArea').innerHTML += 'contextmenu|' };
    document.getElementById('myDiv').onclick = () => { document.getElementById('myTextArea').innerHTML += 'click|' };
    document.getElementById('myDiv').ondblclick = () => { document.getElementById('myTextArea').innerHTML += 'doubleclick|' };
    document.documentElement.onkeydown = () => { document.getElementById('myTextArea').innerHTML += 'keydown|' };
    document.documentElement.onkeyup = () => { document.getElementById('myTextArea').innerHTML += 'keyup|' };
    window.onscroll = () => { document.getElementById('myTextArea').innerHTML += pageYOffset + 'px'; };
   };

Работа с событиями мыши, клавиатуры и прокрутки в JavaScript

Задание:

HTML–код (index.html):

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

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

Результат: