Что такое обработчик события

Вызов обработчика событий в Visual Basic

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

Обработчик событий в Visual Basic — это Sub процедура. Однако обычно это не так же, как и другие Sub процедуры. Вместо этого вы определяете процедуру как обработчик события. Это можно сделать с предложением Handles и переменной WithEvents или с помощью инструкции AddHandler. Handles Использование предложения — это способ объявления обработчика событий по умолчанию в Visual Basic. Это способ написания обработчиков событий конструкторами при программе в интегрированной среде разработки (IDE). Оператор AddHandler подходит для динамического вызова событий во время выполнения.

При возникновении события Visual Basic автоматически вызывает процедуру обработчика событий. Любой код, имеющий доступ к событию, может привести к его возникновению путем выполнения инструкции RaiseEvent.

С одним и тем же событием можно связать несколько обработчиков событий. В некоторых случаях обработчик можно отсооблять от события. Для получения дополнительной информации см. Events.

Вызов обработчика событий с помощью Handles и WithEvents

1. Убедитесь, что событие объявлено с помощью инструкции event.
2. Объявите переменную объекта на уровне модуля или класса с помощью WithEvents ключевое слово. Предложение As для этой переменной должно указывать класс, который вызывает событие.
3. В объявлении процедуры обработки Sub событий добавьте Handles предложение, указывающее WithEvents переменную и имя события.
4. При возникновении события Visual Basic автоматически вызывает процедуру Sub . Код может использовать инструкцию RaiseEvent для выполнения события. В следующем примере определяется событие и WithEvents переменная, ссылающаяся на класс, который вызывает событие. Процедура обработки Sub событий использует Handles предложение для указания класса и события, которые он обрабатывает.

Public Class RaisesEvent Public Event SomethingHappened() Dim WithEvents happenObj As New RaisesEvent Public Sub ProcessHappen() Handles happenObj.SomethingHappened ' Insert code to handle somethingHappened event. End Sub End Class 

Вызов обработчика событий с помощью AddHandler

1. Убедитесь, что событие объявлено с помощью инструкции Event .
2. Выполните инструкцию AddHandler, чтобы динамически подключить процедуру обработки Sub событий к событию.
3. При возникновении события Visual Basic автоматически вызывает процедуру Sub . Код может использовать инструкцию RaiseEvent для выполнения события. В следующем примере инструкция AddHandler в конструкторе используется для связывания OnFormClosing процедуры в качестве обработчика FormClosingсобытий.

Sub New() InitializeComponent() AddHandler Me.FormClosing, AddressOf OnFormClosing End Sub Private Sub OnFormClosing(sender As Object, e As FormClosingEventArgs) ' Insert code to deal with impending closure of this form. End Sub 

См. также

• Процедуры
• Подпрограммы
• Оператор Sub
• Оператор AddressOf
• Практическое руководство. Создание процедуры
• Практическое руководство. Вызов процедуры, которая не возвращает значение

Совместная работа с нами на GitHub

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

Обработка события элемента управления (Windows Forms .NET)

События для элементов управления (и для форм) обычно задаются с помощью визуального конструктора Visual Studio для Windows Forms. Настройка события с помощью визуального конструктора называется обработкой события во время разработки. Вы также можете динамически обрабатывать события в коде — это называется обработкой событий во время выполнения. Событие, созданное во время выполнения, позволяет динамически подключать обработчики событий на основе текущих действий приложения.

Документация по рабочему столу для .NET 7 и .NET 6 находится в стадии разработки.

Обработка события — конструктор

В Visual Studio используйте визуальный конструктор для управления обработчиками событий элементов управления. Визуальный конструктор создаст код обработчика и добавит его в событие.

Установка обработчика

Используйте панель Свойства, чтобы добавить или задать обработчик события:

1. Откройте визуальный конструктор формы, содержащей элемент управления, который нужно изменить.
2. Выберите элемент управления.
3. Измените режим панели Свойства на События, нажав кнопку событий ().
4. Найдите событие, к которому нужно добавить обработчик, например событие Click:
5. Выполните одно из следующих действий.
   • Дважды щелкните событие, чтобы создать новый обработчик. Оно пусто, если обработчик не назначен. Если оно не пусто, это действие открывает код формы и переходит к существующему обработчику.
   • Используйте поле выбора () для выбора существующего обработчика. В поле выбора будут перечислены все методы, имеющие совместимую сигнатуру метода для обработчика событий.

Очистка обработчика

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

1. Откройте визуальный конструктор формы, содержащей элемент управления, который нужно изменить.
2. Выберите элемент управления.
3. Измените режим панели Свойства на События, нажав кнопку событий ().
4. Найдите событие, содержащее обработчик, который требуется удалить, например событие Click:
5. Щелкните событие правой кнопкой мыши и выберите Сбросить.

Обработка события — код

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

Добавление обработчика

В следующем примере показано, как создать элемент управления и добавить обработчик событий. Этот элемент управления создается в обработчике событий Button.Click другой кнопкой. При нажатии Кнопки1. Код перемещает новую кнопку и изменяет ее размер. Событие новой кнопки Click обрабатывается методом MyNewButton_Click . Чтобы появилась новая кнопка, она добавляется в коллекцию формы Controls . Существует также код для удаления обработчика события Button1.Click , который рассматривается в разделе Удаление обработчика.

private void button1_Click(object sender, EventArgs e) < // Create and add the button Button myNewButton = new() < Location = new Point(10, 10), Size = new Size(120, 25), Text = "Do work" >; // Handle the Click event for the new button myNewButton.Click += MyNewButton_Click; this.Controls.Add(myNewButton); // Remove this button handler so the user cannot do this twice button1.Click -= button1_Click; > private void MyNewButton_Click(object sender, EventArgs e)

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click 'Create and add the button Dim myNewButton As New Button() With 'Handle the Click event for the new button AddHandler myNewButton.Click, AddressOf MyNewButton_Click Me.Controls.Add(myNewButton) 'Remove this button handler so the user cannot do this twice RemoveHandler Button1.Click, AddressOf Button1_Click End Sub Private Sub MyNewButton_Click(sender As Object, e As EventArgs) End Sub 

Чтобы выполнить этот код, выполните следующие действия в форме с помощью визуального конструктора Visual Studio:

1. Добавьте новую кнопку в форму и назовите ее Кнопка1.
2. Измените режим панели Свойства на События, нажав кнопку событий ().
3. Дважды щелкните по событию Нажать, чтобы создать обработчик. Это действие открывает окно кода и создает пустой метод Button1_Click .
4. Замените код метода приведенным выше кодом.

Дополнительные сведения о событиях C# см. в разделе События (C#). Дополнительные сведения о событиях Visual Basic см. в разделе События» (Visual Basic)

Удаление обработчика

В разделе Добавление обработчика использовался код для демонстрации добавления обработчика. Этот код также содержит вызов для удаления обработчика:

button1.Click -= button1_Click; 

RemoveHandler Button1.Click, AddressOf Button1_Click 

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

Дополнительные сведения о событиях C# см. в разделе События (C#). Дополнительные сведения о событиях Visual Basic см. в разделе События» (Visual Basic)

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

На панели Свойства визуального конструктора Visual Studio можно выбрать тот же обработчик, который уже используется другим событием. Следуйте указаниям в разделе Настройка обработчика, чтобы выбрать существующий обработчик вместо создания нового.

В C# обработчик присоединяется к событию элемента управления в коде конструктора формы, который был изменен с помощью визуального конструктора. Дополнительные сведения о событиях C# см. в разделе Events (C#)

Visual Basic

В Visual Basic обработчик присоединяется к событию элемента управления в файле кода программной части формы, где объявляется код обработчика событий. В код обработчика событий можно добавить несколько ключевых слов Handles , чтобы использовать его с несколькими событиями. Визуальный конструктор создаст ключевое слово Handles и добавит его в обработчик событий. Однако, это можно легко сделать самостоятельно для любого события и обработчика событий элемента управления, если сигнатура метода обработчика соответствует событию. Дополнительные сведения о событиях Visual Basic см. в разделе События (Visual Basic)

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

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click, Button2.Click 'Do some work to handle the events End Sub 

См. также

• События элементов управления
• Общие сведения о событиях
• Использование событий мыши
• Использование событий клавиатуры
• System.Windows.Forms.Button

Совместная работа с нами на GitHub

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

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

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

Если JavaScript-приложение интересует определенный тип события для определенного элемента документа, оно может зарегистрировать одну или более функций, которая будет вызываться при возникновении этого события. Имейте в виду, что это не является уникальной особенностью веб-программирования: все приложения с графическим интерфейсом пользователя действуют именно таким образом — они постоянно ожидают, пока что-то произойдет (т.е. ждут появления событий), и откликаются на происходящее.

— это строка, определяющая тип действия, вызвавшего событие. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа (или какого-то другого ресурса) из сети. Поскольку тип события — это просто строка, его иногда называют именем события.

— это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие «load» объекта Window или событие «click» элемента . Самыми типичными целями событий в клиентских приложениях на языке JavaScript являются объекты Window, Document и Element, но некоторые типы событий могут происходить и в других типах объектов.

— это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в веб-браузере, указав тип события и цель. Когда в указанном целевом объекте возникнет событие указанного типа, браузер вызовет обработчик. Когда обработчики событий вызываются для какого-то объекта, мы иногда говорим, что браузер «возбудил» или «сгенерировал» событие.

— это объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента (кроме IE8 и более ранних версий, где объект события доступен только в виде глобальной переменной event). Все объекты событий имеют свойство type, определяющее тип события, и свойство target, определяющее цель события.

Для каждого типа события в связанном объекте события определяется набор свойств. Например, объект, связанный с событиями от мыши, включает координаты указателя мыши, а объект, связанный с событиями от клавиатуры, содержит информацию о нажатой клавише и о нажатых клавишах-модификаторах. Для многих типов событий определяются только стандартные свойства, такие как type и target, и не передается никакой дополнительной полезной информации. Для таких типов событий важно само наличие происшествия события, и никакая другая информация не имеет значения.

— это процесс, в ходе которого браузер решает, в каких объектах следует вызвать обработчики событий. В случае событий, предназначенных для единственного объекта (таких как событие «load» объекта Window), надобность в их распространении отсутствует. Однако, когда некоторое событие возникает в элементе документа, оно распространяется, или «всплывает», вверх по дереву документа.

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

Регистрация обработчиков событий

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

Дело осложняется тем, что каждый прием имеет две версии. Свойство обработчика события можно установить в программном коде на языке JavaScript или в элементе документа, определив соответствующий атрибут непосредственно в разметке HTML. Регистрация обработчиков вызовом метода может быть выполнена стандартным методом с именем addEventListener(), который поддерживается всеми браузерами, кроме IE версии 8 и ниже, и другим методом, с именем attachEvent(), поддерживаемым всеми версиями IE до IE9.

Установка свойств обработчиков событий

Самый простой способ зарегистрировать обработчик события заключается в том, чтобы присвоить свойству целевого объекта события желаемую функцию обработчика. По соглашению свойства обработчиков событий имеют имена, состоящие из слова «on», за которым следует имя события: onclick, onchange, onload, onmouseover и т.д. Обратите внимание, что эти имена свойств чувствительны к регистру и в них используются только строчные символы, даже когда имя типа события состоит из нескольких слов (например «readystatechange»). Ниже приводятся два примера регистрации обработчиков событий:

// Присвоить функцию свойству onload объекта Window. // Функция - обработчик события: она вызывается, когда документ будет загружен window.onload = function() < // Отыскать элемент var elt = document.getElementById("shipping_address"); // Зарегистрировать обработчик события, который будет вызываться // непосредственно перед отправкой формы elt.onsubmit = function() < return validate(this); >> 

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

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

Установка атрибутов обработчиков событий

Свойства обработчиков событий в элементах документа можно также устанавливать, определяя значения атрибутов в соответствующих HTML-тегах. В этом случае значение атрибута должно быть строкой программного кода на языке JavaScript. Этот программный код должен быть не полным объявлением функции обработчика события, а только ее телом. То есть реализация обработчика события в разметке HTML не должна заключаться в фигурные скобки и предваряться ключевым словом function. Например:

Щелкните здесь

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

Некоторые типы событий предназначены для браузера в целом, а не для какого-то конкретного элемента документа. Обработчики таких событий в языке JavaScript регистрируются в объекте Window. В разметке HTML они должны помещаться в тег , но браузер зарегистрирует их в объекте Window. Ниже приводится полный список таких обработчиков событий, определяемых проектом спецификации HTML5:

onafterprint onfocus ononline onresize onbeforeprint onhashchange onpagehide onstorage onbeforeunload onload onpageshow onundo onblur onmessage onpopstate onunload onerror onoffline onredo

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

addEventListener()

В стандартной модели событий, поддерживаемой всеми браузерами, кроме IE версии 8 и ниже, целью события может быть любой объект — включая объекты Window и Document и все объекты Elements элементов документа — определяющий метод с именем addEventListener(), с помощью которого можно регистрировать обработчики событий для этой цели.

Метод addEventListener() принимает три аргумента. Первый — тип события, для которого регистрируется обработчик. Тип (или имя) события должен быть строкой и не должен включать префикс «on», используемый при установке свойств обработчиков событий. Вторым аргументом методу addEventListener() передается функция, которая должна вызываться при возникновении события указанного типа. В последнем аргументе методу addEventListener() передается логическое значение. Обычно в этом аргументе передается значение false. Если передать в нем значение true, функция будет зарегистрирована как перехватывающий обработчик и будет вызываться в другой фазе распространения события.

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

Следующий фрагмент регистрирует два обработчика события «click» в элементе . Обратите внимание на различия двух используемых приемов:

Щелкните меня!  

Вызов метода addEventListener() со строкой «click» в первом аргументе никак не влияет на значение свойства onclick. Во фрагменте, приведенном выше, щелчок на кнопке приведет к выводу двух диалоговых окон alert(). Но важнее то, что метод addEventListener() можно вызвать несколько раз и зарегистрировать с его помощью несколько функций-обработчиков для одного и того же типа события в том же самом объекте. При появлении события в объекте будут вызваны все обработчики, зарегистрированные для этого типа события, в порядке их регистрации.

Многократный вызов метода addEventListener() для одного и того же объекта с теми же самыми аргументами не дает никакого эффекта — функция-обработчик регистрируется только один раз и повторные вызовы не влияют на порядок вызова обработчиков.

Парным к методу addEventListener() является метод removeEventListener(), который принимает те же три аргумента, но не добавляет, а удаляет функцию-обработчик из объекта. Это часто бывает удобно, когда необходимо зарегистрировать временный обработчик события, а затем удалить его в какой-то момент.

Internet Explorer версии ниже IE9 не поддерживает методы addEventListener() и removeEventListener(). В версии IE5 и выше определены похожие методы, attachEvent() и detachEvent(). Поскольку модель событий в IE не поддерживает фазу перехвата, методы attachEvent() и detachEvent() принимают только два аргумента: тип события и функцию обработчика, при этом в первом аргументе методам в IE передается имя свойства обработчика с префиксом «on», а не тип события без этого префикса.

Вызов обработчиков событий

После регистрации обработчика событий веб-браузер будет вызывать его автоматически, когда в указанном объекте будет возникать событие указанного типа. В этом разделе подробно описывается порядок вызова обработчиков событий, аргументы обработчиков, контекст вызова (значение this) и назначение возвращаемого значения обработчика. К сожалению, некоторые из этих подробностей отличаются между IE версии 8 и ниже и другими браузерами.

Аргумент обработчика событий

При вызове обработчика событий ему обычно (за одним исключением, о котором рассказывается ниже) передается объект события в виде единственного аргумента. Свойства объекта события содержат дополнительную информацию о событии. Свойство type, например, определяет тип возникшего события.

В IE версии 8 и ниже обработчикам событий, зарегистрированным установкой свойства, объект события при вызове не передается. Вместо этого объект события сохраняется в глобальной переменной window.event. Для переносимости обработчики событий можно оформлять, как показано ниже, чтобы они использовали переменную window.event при вызове без аргумента:

function handler(event) < event = event || window.event; // Здесь находится реализация обработчика >

Объект события передается обработчикам событий, зарегистрированным с помощью метода attachEvent(), но они также могут использовать переменную window.event.

При регистрации обработчика события посредством HTML-атрибута браузер преобразует строку с программным кодом на языке JavaScript в функцию. Браузеры, отличные от IE, создают функцию с единственным аргументом event. В IE создается функция, не принимающая аргументов. Если в таких функциях использовать идентификатор event, он будет ссылаться на window.event. В любом случае обработчики событий, определяемые в разметке HTML, могут ссылаться на объект события, используя идентификатор event.

Контекст обработчиков событий

Когда обработчик событий регистрируется установкой свойства, это выглядит как определение нового метода элемента документа:

e.onclick = function() < /* реализация обработчика */ >;

Поэтому нет ничего удивительного, что обработчики событий вызываются (с одним исключением, касающимся IE, которое описывается ниже) как методы объектов, в которых они определены. То есть в теле обработчика событий ключевое слово this ссылается на цель события.

В обработчиках ключевое слово this ссылается на целевой объект, даже когда они были зарегистрированы с помощью метода addEventListener(). Однако, к сожалению, это не относится к методу attachEvent(): обработчики, зарегистрированные с помощью метода attachEvent(), вызываются как функции, и в них ключевое слово this ссылается на глобальный (Window) объект. Эту проблему можно решить следующим способом:

/* Регистрирует указанную функцию как обработчик событий указанного типа в указанном объекте. Гарантирует, что обработчик всегда будет вызываться как метод целевого объекта. */ function addEvent(target, type, handler) < if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) < // Вызвать обработчик как метод цели, // и передать ему объект события return handler.call(target, event); >); >

Обратите внимание, что обработчики событий, зарегистрированные таким способом, нельзя удалить, потому что ссылка на функцию-обертку, передаваемую методу attachEvent(), нигде не сохраняется, чтобы ее можно было передать методу detachEvent().

Возвращаемые значения обработчиков

Значение, возвращаемое обработчиком события, зарегистрированным установкой свойства объекта или с помощью HTML-атрибута, следует учитывать. Обычно возвращаемое значение false сообщает браузеру, что он не должен выполнять действия, предусмотренные для этого события по умолчанию.

Например, обработчик onclick кнопки отправки формы может вернуть false, чтобы предотвратить отправку формы браузером. (Это может пригодиться, если ввод пользователя не прошел проверку на стороне клиента.) Аналогично обработчик события onkeypress поля ввода может фильтровать ввод с клавиатуры, возвращая false при вводе недопустимых символов.

Также важно значение, возвращаемое обработчиком onbeforeunload объекта Window. Это событие генерируется, когда браузер выполняет переход на другую страницу. Если этот обработчик вернет строку, она будет выведена в модальном диалоговом окне, предлагающем пользователю подтвердить свое желание покинуть страницу.

Важно понимать, что учитываются значения, возвращаемые обработчиками событий, только если обработчики зарегистрированы посредством установки свойств. Обработчики, зарегистрированные с помощью addEventListener() или attachEvent() вместо этого должны вызывать метод preventDefault() или устанавливать свойство returnValue объекта события.

Отмена событий

Значение, возвращаемое обработчиком события, зарегистрированным как свойство, можно использовать для отмены действий, выполняемых браузером по умолчанию в случае этого события. В браузерах, поддерживающих метод addEventListener(), отменить выполнение действий по умолчанию можно также вызовом метода preventDefault() объекта события. Однако в IE, версии 8 и ниже, тот же эффект достигается установкой свойства returnValue объекта события в значение false.

В следующем фрагменте демонстрируется обработчик события клика по гиперссылке, который использует все три способа отмены события (блокирует переход пользователя по ссылке):

window.onload = function() < // Найти все ссылки var a_href = document.getElementsByTagName('a'); // Добавить обработчик события click (не для IE<=8) for(var i = 0; i < a_href.length; i++) a_href[i].addEventListener('click', function(e) , false); >;

Текущий проект модуля «DOM Events 3» определяет в объекте Event свойство с именем defaultPrevented. Оно пока поддерживается не всеми браузерами, но суть его в том, что при обычных условиях оно имеет значение false и принимает значение true только в случае вызова метода preventDefault().

Отмена действий, по умолчанию связанных с событием, — это лишь одна из разновидностей отмены события. Имеется также возможность остановить распространение события. В браузерах, поддерживающих метод addEventListener(), объект события имеет метод stopPropagation(), вызов которого прерывает дальнейшее распространение события. Если в том же целевом объекте будут зарегистрированы другие обработчики этого события, то остальные обработчики все равно будут вызваны, но никакие другие обработчики событий в других объекта не будут вызваны после вызова метода stopPropagation().

В IE версии 8 и ниже метод stopPropagation() не поддерживается. Вместо этого объект события в IE имеет свойство cancelBubble. Установка этого свойства в значение true предотвращает распространение события.

Текущий проект спецификации «DOM Events 3» определяет в объекте Event еще один метод — метод с именем stopImmediatePropagation(). Подобно методу stopPropagation(), он предотвращает распространение события по любым другим объектам. Но кроме того, он также предотвращает вызов любых других обработчиков событий, зарегистрированных в том же объекте.

Обработчики Событий в JS (как работает addEventListener)

В этой статье мы с вами разберемся как правильно использовать обработчики событий (addEventListener) в Javascript на различных элементах DOM дерева страниц. Эти элементы могут включать кнопки, ссылки, изображения и так далее.

Любой DOM элемент запускает событие, когда мы с ним как-то взаимодействуем (кликаем, наводим мышь и др.). Обработчики событий в JS используются для того, чтобы реагировать на эти события.

Обработчики событий можно «вешать» на любые элементы DOM (Data Object Model) дерева, а также глобальные объекты window и document.

Предположим, на нашей странице есть html элемент button с классом «btn»:

1div class="wrapper"> 
2 button class="btn">Click/button> 
3 /div>

Давайте выделим наш элемент button и присвоим его переменной button:

1const button = document.querySelector('.btn');

Чтобы «повесить» обработчик событий на наш элемент button, нужно использовать специальный метод — addEventListener. Этот метод принимает 2 аргумента:

1. Тип события (мы будем «слушать» событие «click»).
2. Так называемую колбэк (callback) функцию, которая запускается после срабатывания нужного события.

Колбэк функция (callback function) — отличается от обычной функции, тем, что ее запускаем не мы, а браузер, который делает это после срабатывания события.

1const button = document.querySelector('.btn'); 
2button.addEventListener('click', function ()  
3 console.log('click'); 
4 >);

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

Обработчики событий JS (выносим логику коллбэк функции за пределы метода addEventListener)

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

1const button = document.querySelector('.btn'); 
2 
3 function handleClick()  
4 console.log('click'); 
5 > 
6button.addEventListener('click', handleClick);

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

Давайте использовать готовую логику в функции handleClick — для новой кнопки:

1div class="wrapper"> 
2 button class="btn">Click/button> 
3 button class="btnTwo">Click 2/button> 
4 /div>

1const button = document.querySelector('.btn'); 
2 const buttonTwo = document.querySelector('.btnTwo'); 
3 
4 function handleClick()  
5 console.log('click'); 
6 > 
7button.addEventListener('click', handleClick); 
8 
9 // Вешаем обработчик событий с готовой логикой на новую кнопку 
10buttonTwo.addEventListener('click', handleClick);

Как снять обработчик события addEventListener с элемента?

Чтобы снять обработчик события с какого-либо элемента, нужно использовать метод removeEventListener. В качестве аргументов нужно указать не только название события («click»), но и название коллбэк функции, которая привязана к элементу.

1buttonTwo.removeEventListener('click', handleClick);

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

Обработка событий на нескольких DOM элементах

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

Предположим, на нашей странице есть 5 кнопок с классом «btn»:

1div class="wrapper"> 
2 button class="btn">Click 1/button> 
3 button class="btn">Click 2/button> 
4 button class="btn">Click 3/button> 
5 button class="btn">Click 4/button> 
6 button class="btn">Click 5/button> 
7 /div>

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

Подход 1. Используем отдельный addEventListener для каждой кнопки

Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons. Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке, и повесить на нее обработчик событий addEventListener.

1const buttons = document.querySelectorAll('.btn'); 
2 
3 function handleClick()  
4 console.log('click'); 
5 > 
6 
7buttons.forEach((button) =>  
8 button.addEventListener('click', handleClick); 
9 >);

Подход 2. Делегирование события (Event delegation)

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

То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper», и обрабатывать события, которые активируются на дочерних элементах button.

Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript, который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.

Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target, чтобы получить элемент, на который мы кликнули.

1const wrapper = document.querySelector('.wrapper'); 
2 
3 function handleClick(e)  
4 console.log('click', e.target); 
5 // При клике получаем каждый конкретный элемент button 
6 // click  
7 // click  
8 > 
9 
10wrapper.addEventListener('click', handleClick);

Прототипное наследование Javascript (+ видео с примером)

Поднятие в JS (Hoisting в Javascript + 3 примера)