Вы здесь: Главная » JavaScript » Обработка событий в JavaScript

Обработка событий в JavaScript

Обработка событий в JavaScript - это, пожалуй, самое "вкусное блюдо", т.к. именно обработка событий выдает ответную реакцию на действия пользователей.

События в JS разделяются на системные: загрузка (load) и выгрузка (unload) страницы, события мыши (click, mouseover, mousemove и т.д.) и события клавиатуры (keypress, keydown, keyup).

Сегодня сосредоточимся на событиях мыши.

События мыши

К событиям мыши относятся:

  • click - клик;
  • dblclick - двойной клик;
  • mouseover - наведение курсора мыши на элемент;
  • mousemove - перемещение курсора мыши над элементом;
  • mouseout - уведение курсора мыши с элемента;
  • mousedown - нажатие левой кнопки мыши;
  • mouseup - отпускание левой кнопки мыши;
  • contextmenu - нажатие правой кнопки мыши и вывод контекстного меню.

Для того чтобы написать ответную реакцию на событие, создают обработчик события (event handler), который, как правило, представляет собой функцию.

Назначить обработчик события можно несколькими способами:

  1. в виде атрибута элемента;
  2. в виде безымянной функции;
  3. в виде именованной функции;
  4. с помощью метода addEventListener().

Рассмотрим все способы.

Обработчик события как атрибут элемента

Это самый старый способ назначения обработчиков события и наименее используемый на данный момент. Для того чтобы его добавить, необходимо к имени события добавить приставку "on" и записать примерно такой код:

Можно вызвать функцию, в которую можно передать один или несколько аргументов:

Пример этого кода:

Кликни здесь, и этот абзац станет красным. Но только один раз.

Кликни здесь, и этот абзац станет зеленым. Но только один раз.

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

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

Обработчик события в виде безымянной функции

Используется при назначении обработчиков событий для большого количества элементов. К имени события, как в предыдущем варианте, добавляется приставка "on". В примере ниже приведен код для элементов списка с id="rules". При клике на каждый из них цифра меняется на маркер в виде галочки.

И сам пример:

    Для королевского бала необходимо:

  1. Купить или сшить бальное платье
  2. Сделать прическу и макияж
  3. Научиться танцевать вальс
  4. Выучить все правила этикета

В инспекторе свойств (Firefox на скриншотах ниже) можно увидеть, что к каждому элементу списка добавилась кнопка с буквами ev (от англ. event - событие):

События

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

Обработчик события в виде именованной функции

Обработчик события назначается аналогично предыдущему случаю, но после знака присваивания записывается имя функции, а не сам ее код. Плюс этого способа заключается в том, что одну и ту же функцию можно назначить для разных html-элементов.

В примере ниже клик на крестике в правом верхнем углу одного блока (.block) и на изображении внутри другого блока (.round) приведет к удалению этих блоков. Выполняется это с помощью одной и той же функции:

console.log()  в этом коде выведет в консоль браузера, какой из блоков был удален.

Сам пример:

× Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod distinctio repudiandae accusantium excepturi nostrum nemo earum maiores aliquid quia eius.
tooltipster

Обратите внимание, что в коде выше при вызове функции круглые скобки не нужны.

Для того чтобы отменить обработку события, записывают после знака присвоения  null:

Использование метода addEventListener()

Самый используемый в последнее время, т.к. позволяет назначить несколько обработчиков одного и того же события. В его синтаксисе не нужно использовать приставку "on", только название самого события:

Под параметром "фаза" подразумевается фаза прохождения события - всплытие или перехват (почитать подробнее). Поскольку, большинство событий обрабатывают на фазе всплытия, последний параметр будет равен false. А поскольку именно таково его значение по умолчанию, то его просто не указывают:

Чтобы отменить назначенный таким образом обработчик события, используют метод removeEventListener(), указывая в скобках и тип события, и функцию, которая вызывалась по нему.

В примере ниже при клике на изображении оно сменяется на другое. Пути к изображениям берутся из массива pics:

Пример "вживую":

Image

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

See the Pen JavaScript Events by Elen (@ambassador) on CodePen.18892

1 Комментарий

  1. А можно еще поподробней о событиях?
    И с большим количеством примеров?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *