что нужно знать об обработке событий OTUS
2026-03-10 22:34 Diff
https://otus.ru/journal/jquery-chto-nuzhno-znat-ob-obrabotke-sobytij/

JQuery – бесплатная библиотека, которая используется при программировании на JavaScript. Она имеет открытый исходный код и используется для облегчения веб-разработки. 

JQuery упрощает взаимодействие с DOM-элементами. При помощи этой библиотеки удается реализовывать обработку событий с минимальными трудностями. Именно об этом предстоит поговорить далее. Информация пригодится как разработчикам-новичкам, так и уже более опытным программистам.

Несколько слов о событии

Все действия клиентов, посещающих веб страницу, можно обработать. Такие операции носят название событий. Примеры:

  • передвижение курсора через имеющийся элемент;
  • нажатие на тот или иной объект веб-страницы;
  • выбор радио кнопки.

Событие – это своеобразный «сигнал», который возникает в браузере. Он сообщает клиенту, что что-то произошло для дальнейшего взаимодействия.

События в DOM бывают нескольких видов. Ниже – таблица, которая показывает некоторые доступные варианты:

События мышиСобытия клавиатурыСобытия формСобытия окон и документовclickkeypresssubmitloadmouseenterkeydownblurunloaddbclickkeyupchangeresizemouseleavefocusscroll

Далее предстоит изучить особенности обработчика событий JS, а также рассмотреть методы JQuery для обработки «происшествий».

Работа с методами JQuery

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

  • on;
  • one.

Первый вариант используется еще и для более краткой записи операции.

Выше – наглядный пример работы со слушателем. Перед тем как переходить к добавлению элементам обработчиков, потребуется сначала их получить. Для этого используется селектор. В него передается соответствующая функция (selector). Результатом становится набор найденных элементов в формате объекта jQuery.

Метод on используется для присоединения одного или нескольких «слушателей» к заданному элементу. One работает аналогичным образом, но отличается тем, что выполнение обработчика происходит всего один раз при наступлении заданного «происшествия».

Метод on ()

Метод on () в рассматриваемой библиотеке JS используется для присоединения к выбранным элементам функции обработчика событий. Применяется не только к одной «операции», но и к нескольким.

Синтаксис будет следующим:

Это – вариант для назначения функции одного или нескольких событий. Здесь:

  • events – это типы событий, которые будут обрабатываться;
  • selector – селектор, по которому происходит фильтрация элементов, находящихся внутри уже обнаруженных;
  • data – данные, передаваемые непосредственно обработчику событий (они размещаются в переменной event .data);
  • handler – функция, установленная в качестве обработчика.

Если вместо handler указать значение false, оно укажет на реализацию функции типа function () {return false;}.

С помощью метода on () можно установить на выбранные элементы сразу несколько разных слушателей. Каждый из них будет реагировать на заданный тип события. Форма представления такой записи будет следующей:

.

Здесь:

  • eventMap – это объект, в котором необходимо перечислить типы обрабатываемых событий и соответствующие им слушатели;
  • selector – селектор для фильтрации;
  • data – информация, которая будет передаваться слушателю.

А вот простой пример использования метода on в jQuery:

Этот метод появился в библиотеке в версии 1.7. Помог объединить три ранее существующих метода обработки «происшествий» на элементах HTML страницы: blind, live и delegate.

Убрать обработчик можно при помощи метода off, а для его срабатывания всего один раз – только через метод one.

Типы обрабатываемых событий

В виде первого параметра метода (типа) допускается использование любого строкового значения. При необходимости обработки одного из стандартных javascript-событий, рекомендуется пользоваться «обычными» обозначениями:

  • error;
  • unload;
  • change;
  • select и другими.

Каждый соответствующий тип обладает одноименным методом, который выступает краткой формой on(). Пример – использование click (handler). Такая запись равноценна on («click», handler).

Когда тип события не совпадает ни с одним из имеющихся значений, оно будет рассматриваться библиотекой как пользовательское. Такие элементы будут организованы пользователями путем генерации через методы trigger и triggerHandler.

Пространства имен

Тип «происшествий» иногда задается с указанием пространства имен. Пример – on (‘click.name’, handler). Здесь:

  • name – это именное пространство;
  • click – тип «происшествия».

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

Допускается указание сразу нескольких именных пространств для выбранного элемента. Они пишутся через точку. Для обращения к таким «операциям» достаточно указать одно из них. Именные пространства напоминают классы в CSS.

Прямая и делегированная обработка

Если параметр selector не указан или имеет значение NULL, обработчик будет установлен на выбранные элементы. Он сработает тогда, когда произошло действие, непосредственно на соответствующих компонентах или «поднялось» от их потомков. Такой процесс называется прямым.

У непосредственной обработки есть недостатки. Пример – на странице имеет список (ul), на элементах которого должен срабатывать click. Если при установке соответствующих слушателей в список добавляются новые составляющие, они не будут реагировать на «клики». Связано это с тем, что связи с элементами устанавливались тогда, когда «нововведения» еще не существовали. Из-за этого не исключено возникновение большого количества логических ошибок.

В jQuery для таких ситуаций придумана делегированная обработка событий. Здесь вместо заданного слушателя библиотека установит собственный специальный. Он не установится непосредственно на элементы, для которых используется слушатель (пусть такие «происшествия» называются inner элементы), а на содержащие их элементы (outer). Получится, что inner расположен внутри outer.

Как только событие происходит на одном из элементов inner, оно будет подниматься вверх по DOM-иерархии В какой-то момент этот компонент попадает в один из outer. На нем сработает специально установленный слушатель. Начнется проверка на поднятие от одного из inner элементов. Если это так, запустится обработчик handler.

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

Для организации делегированной обработки потребуется во втором параметре метода on() установить селектор. Тогда:

  • outer элементы – это элементы, к которым применен выбранный метод;
  • inner элементы – компоненты, расположенные внутри outer, а также удовлетворяющие заданному селектору.

Выше – наглядный пример в случае с click.

Чем выше то или иное событие располагается в иерархии, тем больше вычислительных ресурсов потребуется для его обработки.

В браузерах событие load не всплывает вверх по иерархии, как и focus, blur. В Internet Explorer до 8 версии paste и reset тоже не имеют соответствующего свойства. Именно поэтому для них привязывать слушатели необходимо прямо на элементы, для которых генерируются «действия». От делегирования придется отказаться.

Обработчики

В виде параметра handler необходимо указывать функцию или значение false. Пример – анонимная функция:

Допускается задание имени используемой функции:

Когда происходит событие, библиотека передает в слушатель объект event (в нем содержатся дополнительные данные по «происшествию»). Соответствующий элемент отличается от стандартных, предоставляемых браузерами. В jQuery меняются некоторые поля для обеспечения кроссбраузерности. Это позволяет добраться до нативного объекта события. Он будет расположен в поле event.originalEvent.

Событие после появления будет всегда всплывать по иерархии DOM до объекта document. Если в процессе обработки события всплытие нужно остановить, это делается через метод stopPropagation(). Он пишется внутри слушателя. Результатом станет то, что соответствующее событие прекратит дальнейшее всплытие по дереву DOM. Если в текущем элементе присутствовали иные невыполненные обработчики, они будут реализованы. Для исключения данной ситуации потребуется вместо stopPropagation использовать stopImmediatePropagation.

События могут порождать связанные с ними действия. Пример – сразу после того, как пользователь нажал на ссылку, происходит переход на другую страничку. Для отмены соответствующий операций внутри обработчика можно вызвать event. preventDefault.

Допускается указание false вместо параметра. В этом случае event.stopPropagation и event.preventDefault вызываются автоматически. Форма представления метода:

Здесь при нажатии по ссылкам с классом disabled не происходит переход на другие страницы. Событие не передается родительским элементам.

Внутри обработчика переменная this всегда включает в себя DOM элемент, на котором событие отлавливается. Во время прямой обработки им станет один из выбранных элементов, при делегированной – компонент, находящийся внутри одного из выбранных элементов, а также удовлетворяющий параметру selector. Создание объекта jQuery по this-компоненту возможно так: $(this).

Дополнительные данные для слушателя

При изучении on событий в jQuery можно передавать в «происшествия» дополнительные данные. Для этого используется параметр data. Если он задан, то соответствующий элемент станет доступным в обработчике в event.data.

Данный параметр поддерживает передачу информации любого типа, но следует быть аккуратнее при работе со строками. Если передается string, а селектор не установлен, библиотека рассмотрит соответствующий объект в качестве selector-параметра. Исправить ситуацию удается при помощи присваивания null имеющемуся селектору. Data можно задать через объекты. С их помощью слушатель сможет передавать сразу много информации.

Кроме data передать дополнительные параметры в обработчик можно через ручной вызов события методами trigger и triggerhandler.

Метод one

Метод one является единственным в библиотеке, используемым для однократной обработки событий. Он устанавливает слушатель на элементы страницы. В каждом из них он может быть вызван не более одного раза.

Форма представления метода:

Здесь:

  • eventType – тип события, подлежащего обработке;
  • eventData –передаваемые данные;
  • handler (eventObject) – функция, которая устанавливается в качестве слушателя.

Выше – пример установки обработчика через метод one. Убрать его получится при помощи unbind().

Дополнительная информация о событии

При обработке «происшествий» о нем можно получить дополнительную информацию. Соответствующие данные передаются в качестве первого аргумента объекта Event.

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

Как быстро выучить

JQuery – достаточно функциональная библиотека. Выучить ее самостоятельно с нуля бывает проблематично, особенно новичкам. Чтобы быстрее разобраться с JS и его инструментами, рекомендуется закончить специализированные компьютерные курсы. Пример – от образовательного центра OTUS.

Их преимущества – это:

  1. Сжатые сроки обучения и грамотно составленная программа. Выбранное направление можно освоить в период до 12 месяцев.
  2. Постоянное кураторство и организация занятий полностью через интернет. Учебу легко совмещать с работой, семьей и даже хобби.
  3. Разнообразие направлений. Интересные предложения будут найдены не только для новичков, но и для уже опытных программистов.
  4. Возможность освоить не только JS и jQuery, но и другие языки разработки «с нуля».
  5. Интересные домашние и практические задания.

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

Интересует JavaScript? Добро пожаловать на курс в Otus!