JavaScript/Events

Материал из Энциклопедия о программировании
Перейти к: навигация, поиск

Events (события) — одно из главных составляющих ЯП JS, позволяющее динамически отслеживать и реагировать на всё происходящее в документе.

JS интегрируется в веб-страницы. Любой документ или DOM-элемент умеет инициировать различные события, а на событие, зная его имя, можно назначить обработчик.

Концепция событий

В вебе JS события генерируются окном или документом. Напр., если клик был совершён на параграфе, то событие генерируется параграфом, т.е. объектом, что находится в DOM; этот объект создаёт событие.

Подписка на события

Как и везде, в JS на события необходимо подписываться, т.е. нужна подписка на события.

Подписка на событие (subscribe event) выглядит в виде функции-обработчика события (event headler) привязанной к конкретному событию. Т.е. функция-обработчик события привязывается к определённому событию от определённого объекта в объектной модели (DOM) браузера. Когда данный объект сгенерирует событие, то автоматически будет вызвана функция подписанная на данное событие.

Способы подписки на события

Шаблон:alt ttl Существует много способов подписаться на события, но есть 2 основных, работающих во всех браузерах. Подписываться на события можно как непосредственно в HTML, так и в JS, что предпочтительнее.

Подписка на событие в HTML

В качестве атрибута к тегу используется название события, в качестве значения этого атрибута пишется название функции-обработчика:

<p onclick="myEventHandler()">текста параграфа</p>

Где:

  • атрибут onclick — название события.
  • myEventHandler() — значение атрибута — код JS, выполняемый при наступлении данного события. Обычно, для краткости это предопределённая функция-обработчик события.
Подписка на событие в JS
function myEventHandler() { … }
var p1 = document.getElementById("p1");
p1.onclick = myEventHandler;

Где:

  • функция myEventHandler — функция-обработчик события.
  • св-во onclick объекта p1 — название события. Все события имеются в виде свойств объектов.
  • значение свойства onclick — myEventHandler — название функции-обработчика события.

Списки событий

Существует большое множество предопределённых стандарт. событий, что приведены в след. табл.:

Табл. стандартн. основных событий JS
СобытиеОписаниеИнициатор (каким объектом генерируется)
onblurРазмытие, потеря фокуса элементаDOM
onchangeизменение состояния элемента (изменение текста в текстовом поле)DOM
ondbclickдвойной клик/щелчок мышиDOM
onfocusполучение фокусаDOM
onkeydownнажатие клавиши клавиатуры, момент замыкания контакта кнопкиDOM
onkeyupотпускание/отжатие клавиши клавиатуры, момент размыкания контакта кнопкиDOM
onkeypressодинарное нажатие клавиши клавиатуры. Совмещает в себе и является результатом 2-ух событий: onkeydown и onkeyupDOM
onloadВ окне закончилась/завершилась загрузка страницы. Событие генерируется объектом windowwindow
onunloadСобытие генерируется объектом window до того как документ будет выгружен из окна, то есть во время перехода на другой документ или во время закрытия окна.window
onmousedownнажатие кнопки мыши, момент замыкания контактаDOM
onmouseupотжатие кнопки вверх, размыкание контакта кнопкиDOM
onclickодинарный клик, нажатие кнопки мышки. Совмещает в себе 2 события: onmousedown и onmouseupDOM
onmousemoveДвижение курсора мышки над элементом, перемещение мышки над объектомDOM
onmouseoutУвод курсора мышки от элемента, момент когда курсор переходит в положение не над объектомDOM
onmouseoverНаведение курсора мышки на элемент, курсор над объектомDOM
onresetСобытие происходит в момент полной очистки формыform, DOM
onsubmitСобытие происходит перед отправкой данных формы на серверform, DOM
onselectВыбор, выделение. Происходит во время выделения элемента в документе/на странице.DOM
Табл. событий JS
Обработчик событияПоддерживающие HTML-элем.ОписаниеМетод имитации
onAbortimgПрерывание загрузки изображения
onBlura, area, button, input, label, select, textareaПотеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляцииblur
onChangeinput, select, textareaИзменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blurchange
onClickОдинарный щелчок (нажата и отпущена кнопка мыши)click
onDblClickДвойной щелчок
onErrorimg, windowВозникновение ошибки выполнения сценария
onFocusa, area, button, input, label, select, textareaПолучение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)focus
onKeyDownНажата клавиша на клавиатуре
onKeyPressНажата и отпущена клавиша на клавиатуре
onKeyUpОтпущена клавиша на клавиатуре
onLoadbody, framesetЗакончена загрузка документа
onMouseDownНажата кнопка мыши в пределах текущего элемента
onMouseMoveПеремещение курсора мыши в пределах текущего элемента
onMouseOutКурсор мыши выведен за пределы текущего элемента
onMouseOverКурсор мыши наведен на текущий элемент
onMouseUpОтпущена кнопка мыши в пределах текущего элемента
onMovewindowПеремещение окна
onResetformСброс данных формы, т.е. щелчок по кнопке сброса данных формы (input с type = reset)reset
onResizewindowИзменение размеров окна
onSelectinput, textareaВыделение текста в текущем элементе
onSubmitformОтправка данных формы, т.е. щелчок по кнопке отправки формы (input с type = submit)
onUnloadbody, framesetПопытка закрытия окна браузера и выгрузки документа
Внимание! В приведённой выше таблице названия событий для понятности написаны в CamelCase нотации, в коде они пишутся полностью в нижнем регистре.