Обработка событий в 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". При клике на каждый из них цифра меняется на маркер в виде галочки. Для того чтобы назначить обработчик события, мы используем цикл for:

И сам пример:

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

  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

Еще один пример обработки событий с помощью метода addEventListener() вы найдете в статье "Обработка события onmousemove на примере поздравительной открытки".

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

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

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

Если вы изучаете не только нативный JavaScript, но и библиотеку jQuery, то в статье  "Обработка событий в jQuery" вы можете найти несколько способов добавления и удаления обработчиков событий.

Автор: Админ

2 комментария

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

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

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