- События JavaScript
Введение в браузерные события
Для реакции на действия посетителя и внутреннего взаимодействия скриптов существуют события.
Событие – это сигнал от браузера о том, что что-то произошло. Существует много видов событий. Посмотрим список самых часто используемых, пока просто для ознакомления:
События мыши:
· click
– происходит, когда кликнули на элемент левой кнопкой мыши
· contextmenu
– происходит, когда кликнули на элемент правой кнопкой мыши
· mouseover
– возникает, когда на элемент наводится мышь
· mousedown
и mouseup
– когда кнопку мыши нажали или отжали
· mousemove
– при движении мыши
События на элементах управления:
· submit
– посетитель отправил форму <form>
· focus
– посетитель фокусируется на элементе, например нажимает на <input>
Клавиатурные события:
· keydown
– когда посетитель нажимает клавишу
· keyup
– когда посетитель отпускает клавишу
События документа:
· DOMContentLoaded
– когда HTML загружен и обработан, DOM документа полностью построен и доступен.
События CSS:
· transitionend
– когда CSS-анимация завершена.
Также есть и много других событий.
Назначение обработчиков событий
Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
Именно благодаря обработчикам JavaScript-код может реагировать на действия посетителя.
Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная от самого простого.
Использование атрибута HTML
Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>
.
Например, чтобы прикрепить click
-событие к input
кнопке, можно присвоить обработчик onclick
, вот так:
<input value="Нажми меня" onclick="alert('Клик!')" type="button">
При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick
.
В действии:
Обратите внимание, для содержимого атрибута onclick
используются одинарные кавычки, так как сам атрибут находится в двойных.
Частая ошибка новичков в том, что они забывают, что код находится внутри атрибута. Запись вида onclick="alert("Клик!")"
, с двойными кавычками внутри, не будет работать. Если вам действительно нужно использовать именно двойные кавычки, то это можно сделать, заменив их на "
, то есть так: onclick="alert("Клик!")"
.
Однако, обычно этого не требуется, так как прямо в разметке пишутся только очень простые обработчики. Если нужно сделать что-то сложное, то имеет смысл описать это в функции, и в обработчике вызвать уже её.
Следующий пример по клику запускает функцию countRabbits().
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function countRabbits() {
for(var i=1; i<=3; i++) {
alert("Кролик номер " + i);
}
}
</script>
</head>
<body>
<input type="button" onclick="countRabbits()" value="Считать кроликов!"/>
</body>
</html>
Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK
будет работать так же, как onClick
или onCLICK
… Но, как правило, атрибуты пишут в нижнем регистре: onclick
.
Использование свойства DOM-объекта
Можно назначать обработчик, используя свойство DOM-элемента on<событие>
.
Пример установки обработчика click
:
<input id="elem" type="button" value="Нажми меня" />
<script>
elem.onclick = function() {
alert( 'Спасибо' );
};
</script>
Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство onclick
.
Этот способ, по сути, аналогичен предыдущему.
Обработчик хранится именно в DOM-свойстве, а атрибут – лишь один из способов его инициализации.
Эти два примера кода работают одинаково:
1. Только HTML:
<input type="button" onclick="alert('Клик!')" value="Кнопка"/>
2. HTML + JS:
3.
4.
5.
6.
7.
8.
<input type="button" id="button" value="Кнопка" />
9. <script>
10. button.onclick = function() {
11. alert( 'Клик!' );
12. };
</script>
Так как DOM-свойство onclick
, в итоге, одно, то назначить более одного обработчика так нельзя.
В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:
<input type="button" id="elem" onclick="alert('До')" value="Нажми меня" />
<script>
elem.onclick = function() { // перезапишет существующий обработчик
alert( 'После' ); // выведется только это
};
</script>
Кстати, обработчиком можно назначить и уже существующую функцию:
function sayThanks() {
alert( 'Спасибо!' );
}
elem
.onclick
=sayThanks
;
Если обработчик надоел – его всегда можно убрать назначением elem.onclick = null
.
Доступ к элементу через this
Внутри обработчика события this
ссылается на текущий элемент, то есть на тот, на котором он сработал.
Это можно использовать, чтобы получить свойства или изменить элемент.
В коде ниже button
выводит свое содержимое, используя this.innerHTML
: