Обработка событий в Javascript
View more Tutorials:
Событие (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;
Простое и часто встречающееся событие - это событие, при котором пользователи кликают (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>