Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / JavaScript /
События и обработчики событий в JavaScript
JavaScript в большинстве случаев используется для создания интерактивности, то есть для взаимодействия с пользователем. И это взаимодействие основано на событиях, таких как перемещение мыши, нажатие на кнопку, ввод данных и т.п. Сегодня я немного расскажу о событиях и о том, как они обрабатываются в JavaScript.
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
Когда с документом или каким-либо его элементом что-то происходит (завершается загрузка содержимого, прокручивается страница, выполняется щелчок мышью по кнопке, ссылке и т.п.), браузер создаёт (генерирует) соответствующее событие.
Если вам надо “отловить” какое-то событие, то вы создаёте обработчик события - функцию или участок кода, и регистрируете его как обработчик события.
Говоря простыми словами, вы создаёте функцию, и сообщаете сценарию, что эта функция является обработчиком такого-то события.
Например, у вас есть функция Х, которая назначена обработчиком события нажатия левой кнопки мыши на кнопке Z. Теперь, если пользователь щёлкнет левой кнопкой мыши по кнопке Z, то будет вызвана и выполнена функция Х. Далее на примерах я покажу это наглядно.
Модели обработки событий
Одна из неприятностей, связанных с событиями в JavaScript, заключается в том, что отслеживание событий основано на нескольких несовместимых между собой моделях обработки событий. Здесь я не буду подробно об этом говорить, а только перечислю эти модели:
- Исходная (базовая) модель обработки событий. Поддерживается всеми браузерами, но плохо документирована и имеет ограниченные возможности.
- Стандартная модель обработки событий. Имеет большие возможности, стандартизирована. Поддерживается всеми браузерами, кроме Internet Explorer.
- Модель обработки событий Internet Explorer. Обладает многими (но не всеми) возможностями стандартной модели.
Из этого можно сделать несколько важных выводов:
- Для упрощения жизни себе любимому по возможности следует использовать исходную модель.
- При использовании других моделей вам придётся писать отдельный исходный код для Internet Explorer, если вы хотите, чтобы ваши сценарии правильно работали со всеми браузерами.
Виды событий в JavaScript
Событий существует довольно много. Одно и то же действие (например, щелчок кнопкой мыши) может генерировать разные события, в зависимости от того, над каким элементом находился курсор мыши во время нажатия кнопки.
Существуют так называемые события ввода: нажатие кнопок клавиатуры, нажатие на кнопки мыши и т.п. Это низкоуровневые события, которые обычно происходят в результате действий пользователя и сигнализируют именно об этих действиях.
Вторая группа событий - это семантические события - высокоуровневые события. Они более сложны - это уже не просто какие-то сигналы, а, как правило, результат выполнения какой-то операции. Например, завершение загрузки страницы в браузер.
Часто такие события являются результатом выполнения одного или нескольких
низкоуровневых событий. Например, когда пользователь щелкает по кнопке SUBMIT,
вызываются три обработчика событий ввода: onmousedown
(нажатие кнопки мыши), onmouseup (отпускание кнопки мыши) и
onclick (щелчок кнопки мыши). И в итоге щелчок по кнопке мыши
приводит к тому, что HTML-форма, на которой находится кнопка SUBMIT,
генерирует высокоуровневое событие onsubmit.
Кроме того, существуют аппаратно-зависимые и аппаратно-независимые события. Аппаратно-зависимые связаны с аппаратной частью (обычно это мышь и клавиатура). Аппаратно-независимые события могут быть вызваны несколькими способами.
Например, ввод данных в поле с помощью клавиатуры - это аппаратно-зависимое событие. Обычно к аппаратно-зависимым относятся события ввода.
Высокоуровневые семантические события, наоборот, как правило являются
аппаратно-независимыми. Например, событие onchange (изменение данных) для поля ввода является аппаратно независимым, и может быть вызвано несколькими способами: путём ввода с клавиатуры, путём вставки из буфера обмена, программным путём.
Вообще о событиях и их обработчиках можно говорить очень долго. У этой статьи другая цель - просто познакомить вас с событиями. Поэтому я приведу небольшой пример и закончу на этом.
<input type="button"
value="Это кнопка"
onclick="document.write('Вы щёлкнули по кнопке');">
Это пример простейшего использования событий. В данном случае мы “отлавливаем” событие onclick (щёлчок по кнопке), и, когда это событие происходит, вызывается и выполняется обработчик этого события, код которого прописан после наименования события.
Если обработчик события содержит большое количество строк кода, то лучше определить его в виде функции, а для атрибута HTML уже прописать не код обработчика, а имя этой функции-обработчика. Например:
<script>
<!--
function Calc22()
{
document.write("2 + 2 = 4" );
}
// -->
</script>
<input type="button"
value="Сколько будет 2 + 2 ?"
onclick="Calc22();">
Повторюсь - события в JavaScript - это очень объёмная тема. В книгах по JavaScript ей посвящены целые разделы. Конечно, рассказать обо всём в одной статье невозможно. Если хотите знать больше, то вам сюда:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>