Согласие на обработку персональных данных.

15.05.2020
Добавлен курс Тестировщик программного обеспечения.

12.09.2020
Новые видео и статья Процедура Include.

07.09.2020
Новый выпуск журнала Автоматизация и Программирование.

12.08.2020
Новые видео и статья Консоль ошибок для JavaScript.

09.07.2020
Новые видео и статья Операторы != и == против операторов !== и ===.



Раздел: Сайтостроение / JavaScript /

События и обработчики событий в JavaScript

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

JavaScript в большинстве случаев используется для создания интерактивности, то есть для взаимодействия с пользователем. И это взаимодействие основано на событиях, таких как перемещение мыши, нажатие на кнопку, ввод данных и т.п. Сегодня я немного расскажу о событиях и о том, как они обрабатываются в JavaScript.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Когда с документом или каким-либо его элементом что-то происходит (завершается загрузка содержимого, прокручивается страница, выполняется щелчок мышью по кнопке, ссылке и т.п.), браузер создаёт (генерирует) соответствующее событие.

Если вам надо “отловить” какое-то событие, то вы создаёте обработчик события - функцию или участок кода, и регистрируете его как обработчик события.

Говоря простыми словами, вы создаёте функцию, и сообщаете сценарию, что эта функция является обработчиком такого-то события.

Например, у вас есть функция Х, которая назначена обработчиком события нажатия левой кнопки мыши на кнопке Z. Теперь, если пользователь щёлкнет левой кнопкой мыши по кнопке Z, то будет вызвана и выполнена функция Х. Далее на примерах я покажу это наглядно.

Модели обработки событий

Одна из неприятностей, связанных с событиями в JavaScript, заключается в том, что отслеживание событий основано на нескольких несовместимых между собой моделях обработки событий. Здесь я не буду подробно об этом говорить, а только перечислю эти модели:

  • Исходная (базовая) модель обработки событий. Поддерживается всеми браузерами, но плохо документирована и имеет ограниченные возможности.
  • Стандартная модель обработки событий. Имеет большие возможности, стандартизирована. Поддерживается всеми браузерами, кроме Internet Explorer.
  • Модель обработки событий Internet Explorer. Обладает многими (но не всеми) возможностями стандартной модели.

Из этого можно сделать несколько важных выводов:

  1. Для упрощения жизни себе любимому по возможности следует использовать исходную модель.
  2. При использовании других моделей вам придётся писать отдельный исходный код для 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 с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика