Обработка событий в Javascript

1- Javascript Events

Событие (event) является сигналом того, что что-то произошло. Например, вы нажимаете кнопку (button) или закрываете браузер... Все узлы node e DOM генерируют (generate) такие сигналы, но имеются другие сигналы помимо  DOM, например ваше событие закрытия окна браузера.
Ниже является список самых полезных событий  DOM:
Mouse Events:
Событие Описание
click Событие происходит, когда пользователь кликает (click) на элемент (element).
contextmenu Событие происходит, когда пользователь нажимает на правую кнопку мыши (right-clicks) на элемент, чтобы открыть context-menu.
dblclick Событие происходит, когда пользователь делает двойное нажатие (double-clicks) на элемент.

mousedown Событие происходит. когда пользователь нажимает на кнопку мыши над элементом.
mouseup Событие происходит, когда пользователь отпускает кнопку мыши над элементом.

mouseenter Событие происходит, когда курсор (pointer) перемещается на элемент.
mouseleave Событие происходит, когда курсор (pointer) перемещается из элемента.

mousemove Событие происходит, когда курсор перемещается над элементом.

mouseout Событие происходит, когда пользователь перемещает курсор из элемента или выходит из одного из его подэлементов.
mouseover Событие происходит, когда пользователь перемещает курсор в элемент или заходит в один из его подэлементов.
События элемента Form.
Событие Описание
submit Когда пользователь submit (Отправляет) содержание <form>.
focus Когда пользователь фокусируется (focus) на один элемент, например <input>.
blur Когда пользователь выходит из элемента, например <input>.
События клавиши:
Событие Описание
keydown Событие происходит, когда пользователь нажимает на клавишу (key).
keyup Событие происходит, когда пользователь отпускает клавишу.

keypress Событие происходит, когда пользователь нажимает (press) на клавишу (Выполнить 2 действия, нажать и отпустить).
События Document.
Событие Описание
DOMContentLoaded Кога содержание HTML скачано (loaded) и обработано. Модель DOM создана совершенно.
События CSS:
Событие Описание
animationstart Событие происходит, когда начинается процесс анимации CSS.
animationend Событие происходит, когда завершается процесс анимации CSS.
animationiteration Событие происходит, когда повторяется процесс анимации CSS.

Обработка событий:

Чтобы обработать событие, вам нужно прикрепить событие обработчику (handler). Обработчик может быть функцией. Когда событие происходит, обработчик будет вызван для работы. Обработчик (handler) - это способ запуска кодов  Javascript оответствующих действиям пользователя.
Обработчик (handler) может быть настроен внутри  HTML со свойством (attribute) on{event}. Например событие  click:

<input value="Click me" onclick="alert('Click!')" type="button">

<input value="Click me" onclick="someFunction()" type="button">
 
Объект  this представляет элемент, генерирующий событие.
<input value="Click me" onclick="someFunction(this)" type="button">
Когда происходит событие, Javascript создает объект  event и вы можете его использовать как значение параметра.
<input value="Click me" onclick="someFunction(event)" type="button">
 
Вы также можете получить доступ в элемент, генерирующий событие через объект  event.
var target =  event.target;

2- Пример с событиями

Простое и часто встречающееся событие - это событие, при котором пользователи кликают (click) на элемент. Ниже приведен простой пример, пользователь кликает на кнопку​​​​​​​ "="​​​​​​​, чтобы сложить 2 числа.
onclick-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function doCalculate()  {
             var a = document.getElementById("a").value; // A String value
             var b = document.getElementById("b").value; // A String value

             var c = Number(a) + Number(b);

             document.getElementById("c").value = c;
         }
      </script>

   </head>
   <body>

      <h3>Click Event example</h3>

      <input id = "a" type="text" value= "100"/> <br/>
      + <br/>
      <input id = "b" type="text" value = "200"/> <br/>

      <button onclick="doCalculate()"> = </button> <br/>

      <input id = "c" type="text" value = ""/>

   </body>
</html>

 
-
Объект  this и есть элемент, которое генерирует событие. Вы можете передать (pass) данный объект в функцию обработки событий.
this-obj-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(target)  {
             var random = Math.round(Math.random() * 100) + 200;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Event with 'this' object</h3>

      <button onclick="changeSize(this)">Click Me to Change Size</button>

   </body>
</html>
-
Когда событие происходит, объект event создается ​​​​​​с помощью  Javascript, он содержит информацию связанную с событием.  Например, для события мыши объект event может содержать такую информацию, как положение мыши относительно браузера, положение мыши относительно элемента, который генерирует событие,... Вы можете использовать объект​​​​​​​ event для передачи (pass) в функцию обработки событий.
<input value="Click me" onclick="someFunction(event)" type="button">
mouse-events-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Javascript Mouse Events</title>

    <script src="mouse-events-example.js"></script>
    <style>
        .my-div {
            width: 290px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>

    <h3>Mouse Events (Enter, Move, Leave)</h3>

    <div class="my-div"
               onmouseenter="mouseenterHandler(event)"
               onmouseleave="mouseleaveHandler(event)"
               onmousemove="mousemoveHandler(event)">
    </div>

    <h3>Mouse position</h3>
    <div style="color:red;" id="position-div">

    </div>

    <h3>Statistics</h3>
    <div style="color:red;" id="statistics-div">

    </div>

</body>

</html>

 
mouse-events-example.js
var enterCount = 0;
var moveCount = 0;
var leaveCount = 0;


function mouseleaveHandler(evt) {
    leaveCount += 1;

    showPosition(evt);
    showStatistics();
}

function mouseenterHandler(evt) {
    enterCount += 1;

    showPosition(evt);
    showStatistics();
}

function mousemoveHandler(evt) {
    moveCount += 1;

    showPosition(evt);
    showStatistics();
}




function showPosition(evt) {
    var html = "offsetX: " + evt.offsetX +"<br/>" //
               +
               "offsetY: " + evt.offsetY;

    document.getElementById("position-div").innerHTML = html;
}

function showStatistics() {
    var html =
        "enterCount:" + enterCount + "<br/>" //
        +
        "moveCount:" + moveCount + "<br/>" //
        +
        "leaveCount:" + leaveCount;
    document.getElementById("statistics-div").innerHTML = html;
}

 
-
Вы можете получить доступ к элементу, генерирующему событие через объект  event.
event-obj-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(evt)  {
             var target = evt.target;

             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
         }
      </script>

   </head>
   <body>

      <h3>Access 'target' object via 'event' object</h3>

      <button onclick="changeSize(event)">Click Me to Change Size</button>

   </body>
</html>

 
-
Пример функции обработки с несколькими параметрами.
multi-params-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Event Example</title>

      <script type = "text/javascript">

         function changeSize(borderColor, target, evt, bgColor)  {
             var random = Math.round(Math.random() * 100) + 100;
             target.style.width  = random + "px";
             target.style.height  = random + "px";
             target.style.borderColor = borderColor;
             target.style.backgroundColor = bgColor;
         }
      </script>

   </head>
   <body>

      <h3>A Handler has multiple parameters</h3>
      <a href="">Reset</a> <br/><br/>

      <button onclick="changeSize('red', this, event, 'green')">Click Me</button>

   </body>
</html>