- События 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:
