Способность javaScript создавать динамические html страницы базируется на трех столпах. Два из них уже были рассмотрены в предыдущих статьях. А третий — это события.
- Управление окнами браузера — с помощью объекта window.
- Управление объектами внутри окна — DOM.
- Выполнение кода javaScript по событиям.
Событие — реакция компьютера на действие пользователя. Например, с т.з. javaScript событием считается нажатие кнопки клавиатуры, движение и нажатие кнопок мыши, закрытие окна браузера. Все события с т.з. javaScript генерируются объектами документа и браузера (нет понятия ‘пользователя’). Например, при клике на параграф событие клика мышки генерируется объектом – параграф.
Чтобы можно было запустить какой-то код на javaScript, реагирующий на события, надо связать этот код с событием, генерируемым от определенного объекта, т.е. с определенным событием от определенного объекта. Такое действие называют — подписка на событие.
Подписка означает, что мы привязываем функцию к определенному событию от определенного объекта в объектной модели браузера. И когда этот объект создаст (сгенерирует) это событие, то автоматически сработает эта функция.
Содержание статьи
Основные события javaScript
- onclick — нажатие кнопки мышки.
- ondblclick — двойное нажатие кнопки мышки.
- onmousedown — кнопка мышки нажата (опущена вниз).
- onmousemove — мышка двигается по объекту (возникает множество событий, движение мышки по 1px = 1 событие).
- onmouseout — мышка уходит с объекта.
- onmouseover — мышка наезжает на нужный объект.
- onmouseup – кнопка мышки отпущена (поднята вверх).
- onkeydown – кнопка клавиатуры нажата (опущена вниз).
- onkeypress – нажатие кнопки клавиатуры.
- onkeyup – кнопка клавиатуры отпущена (поднята вверх).
- onblur – потеря фокуса ввода (мигающий курсор).
- onfocus — момент получения фокуса ввода данным элементом.
- onchange – генерируется элементом управления, после потери фокуса, если изменился текст (например, в текстовом поле). Исключение — элемент списка ‘select’, в нем это событие генерируется сразу, а не после потери фокуса.
- onload — генерируется, когда в окне закончилась загрузка страницы. Обычно используют, когда надо запустить какой-то javaScript код после полной загрузки страницы.
- onunload – возникает перед тем, как документ будет выгружен из окна (т.е. когда закрываем этот документ или переходим на другой документ).
- onreset – форма сброшена.
- onsubmit – форма данных отправлена.
Подписка на события
- Подписка через javaScript. Такой метод используют в большинстве случаев. Сначала надо найти объект того элемента, на событие от которого хотим подписаться, например, через метод getElementById (указать нужному элементу идентификатор id).
function myFunc(){ //создали простую функцию alert("hello");} function pageInit(){ var p=document.getElementById('1'); p.onclick=myFunc;} //вызвали функцию на срабатывание события window.onload=pageInit; //событие сработает, когда загрузится страница <p id=1>Параграф 1 //задали id для параграфа
- Подписка через код html. Недостаток такого метода в том, что засоряется код html своим кодом javaScript; кроме того, есть несколько ограничений, и в сложных случаях неудобно использовать.
<script type="text/javascript"> function myFunc(){ //создали простую функцию alert("hello");} </script> <p onclick="myFunc()">Параграф 2 //вызвали функцию
Модель обработки событий
Когда возникает событие у какого-либо элемента, то аналогичные события должны возникать и у всех его родительских элементов до самого верха страницы (до ‘body’, т.к. он является главной областью документа). Следовательно, любое событие, возникающее на странице, возникает в body.
Тогда возникает вопрос, в каком порядке такие события будут возникать? В современных браузерах модель обработки событий называется ‘модель всплывающего пузырька’. Ее суть: сначала возникает событие у того элемента, на который кликнули, потом у его родителя, и так далее до самого верха — до ‘body’.
element --> element 2 --> document --> window
Параметры событий (объект event)
Есть такой объект event, у которого много свойств. Читая эти свойства, можно получить информацию о событиях. Чтобы получить информацию, надо сначала получить сам объект.
Основные свойства данного объекта:
- x, y — координаты мышки в момент возникновения события.
- clientX, clientY — то же самое.
- offsetX, offsetY — то же самое, но это смещение мышки относительно родительского элемента.
- screenX, screenY — координаты экрана.
- button — какую кнопку мыши нажали (0 — не нажато, 1 — нажата левая кнопа, 2 — нажата правая кнопка, 4 — нажата средняя кнопка).
- keyCode — числовой код нажатой клавиши клавиатуры.
- srcElement — элемент, который сгенерировал событие.
- fromElement — элемент, с которго мышка съехала.
- toElement — указание на объект, на который мышка наехала.
- cancelBubble — нестандартный способ, если дать ему значение true, то отменится ‘всплывающий пузырек’; или можно подменить код клавиши, которую нажал юзер.