javascript события

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



Добавить комментарий

Ваш e-mail не будет опубликован.