События в javaScript

Способность 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, то отменится ‘всплывающий пузырек’; или можно подменить код клавиши, которую нажал юзер.