Мастер-классы по Javascript Екатеринбург Ростов-на-Дону Москва Узнать больше...
Содержание (скрыть) Содержание (показать)

События: основы

Введение в браузерные события

  1. Назначение обработчиков событий
  2. Специальные методы
  3. Итого

Для реакции на действия посетителя и внутреннего взаимодействия скриптов существуют события.

Событие - это сигнал от браузера о том, что что-то произошло.

Получение объекта события

  1. Путь W3C
  2. Путь IE<9
  3. Кроссбраузерное решение
  4. Итого

Когда обработчик запускается, браузер создает «объект события» с информацией о том, что и где произошло.

В обработчике его можно получить и прочитать детали произошедшего из его свойств.

Всплытие и перехват

  1. Всплытие
    1. Текущий элемент, this
    2. Целевой элемент, event.target
    3. Прекращения всплытия
  2. Стадия перехвата
  3. Итого

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

Действия браузера по умолчанию

  1. Отмена действия браузера
  2. Действия, которые нельзя отменить
  3. Итого

Многие события влекут за собой действие браузера.

Например, клик по ссылке инициирует переход на новый URL, нажатие на кнопку «отправить» в форме — посылку ее на сервер, и т.п.

Если логика работы обработчика требует отменить действие браузера — это возможно.

Отмена выделения, невыделяемые элементы

  1. Предотвращение выделения при клике
  2. Свойство user-select
  3. Атрибут unselectable="on"
  4. Снятие выделения
  5. Итого

В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.

Это бывает нужно в элементах управления, чтобы выделение браузера не мешало посетителю.

Делегирование событий

  1. Пример «Ба Гуа»
  2. На примере меню
  3. Пример со вложенным меню
  4. Применение делегирования: действия в разметке
  5. Вспомогательная функция delegate
  6. Итого

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

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

Эта техника называется делегированием и очень активно применяется в современном JavaScript.


Комментарии

  1. Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  2. Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
  3. Комментарии без смысла, с рекламой или не о статье вообще - удаляются.
Наверх

Содержание

Реклама

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!