Лабораторные - События JavaScript
Дисциплина:
Проектирование динамических страниц
Событие – это то, что произошло или происходит. Например, браузер генерирует событие, когда завершается загрузка документа, когда пользователь водит курсором мыши по веб-странице или нажимает клавишу на клавиатуре.
У любого события есть цель события. Цель события (или целевой объект) – это объект, в котором возникло событие или с которым это событие связано.
Для любого события можно зарегистрировать функцию (одну или более), которая будет автоматически вызываться браузером при возникновении события. Функция, которая используется для обработки события, называют слушателем события или обработчиком события.
Обработчик события регистрируется у целевого объекта. Зарегистрировать обработчик события можно тремя способами:
1) Используя метод addEventListener() у целевого объекта:
elem.addEventListener("click", foo, false);
2) Присвоив обработчик свойству объекта, являющегося целью события:
elem.onclick = foo;
3) Зарегистрировать обработчик события можно присвоив свойству целевого объекта желаемую функцию. Свойства, которым присваиваются обработчики имеют имена, начинающиеся с приставки "on", за которой следует имя события: click, change и т. д.:
window.onload = function () {
alert("Страница полностью загружена!");
}
4) Указать обработчик в качестве значения атрибута целевого HTML-элемента:
"foo()">
Ниже представлен список самых часто используемых DOM-событий:
События мыши:
click– происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).contextmenu– происходит, когда кликнули на элемент правой кнопкой мыши.mouseover/mouseout– когда мышь наводится на / покидает элемент.mousedown/mouseup– когда нажали / отжали кнопку мыши на элементе.mousemove– при движении мыши.
События на элементах управления:
submit– пользователь отправил форму.focus– пользователь фокусируется на элементе, например нажимает на.
Клавиатурные события:
keydownиkeyup– когда пользователь нажимает / отпускает клавишу.
События документа:
DOMContentLoaded– когда HTML загружен и обработан, DOM документа полностью построен и доступен.
CSS events:
transitionend– когда CSS-анимация завершена.
Существует множество и других событий.
Для каждого типа события в связанном объекте события определяется набор свойств. Например, объект, связанный с событиями от мыши, включает координаты указателя мыши, а объект, связанный с событиями от клавиатуры, содержит информацию о нажатой клавише и о нажатых клавишах-модификаторах. Для многих типов событий определяются только стандартные свойства, такие как type и target, и не передается никакой дополнительной полезной информации. Для таких типов событий важно само наличие происшествия события, и никакая другая информация не имеет значения.
Распространение события - это процесс, в ходе которого браузер решает, в каких объектах следует вызвать обработчики событий. В случае событий, предназначенных для единственного объекта (таких как событие «load» объекта Window), надобность в их распространении отсутствует. Однако, когда некоторое событие возникает в элементе документа, оно распространяется, или «всплывает», вверх по дереву документа.
Если пользователь щелкнет мышью на гиперссылке, событие «mousemove» сначала будет возбуждено в элементе , определяющем эту ссылку. Затем оно будет доставлено вмещающим элементам: возможно, элементу , элементу После регистрации обработчика событий веб-браузер будет вызывать его автоматически, когда в указанном объекте будет возникать событие указанного типа.
