Обработка событий в 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>
