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

Javascript Events
Пример с событиями

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>

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

1. Javascript Events

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

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript