Что такое обработчик события и как его создать

Процедуры-обработчики событий

Особенностью обработки событий среде 1С:Предприятия 8 является то, что имя процедуры-обработчика в одних случаях должно совпадать с именем события, а в других случаях может от него отличаться. Данная статья написана, чтобы внести ясность в этом вопросе.

Обратите внимание, что термин «Предопределенная процедура», который использовался в версии 7.х, теперь заменен на «процедура-обработчик события» или просто «обработчик события».

ПРАВИЛО №1. Если процедура-обработчик события относится к форме или элементу управления, то ее обязательно нужно указывать в палитре свойств для формы или элемента управления.

Ниже показана палитра свойств для формы элемента справочника «Номенклатура» с несколькими назначенными обработчиками событий:

За информацией о приемах работы с этой частью палитры свойств обращайтесь к документации: книга «Конфигурирование и администрирование», «Глава 3. Объекты конфигурации => Свойства элементов управления => Категория свойств События» (стр. 1 — 204)

Обратите внимание на важный момент, имя процедуры-обработчика событий может не совпадать с именем события . Для элементов управления чаще всего так и бывает, например, процедура «ТипЦенПриИзменении» обрабатывает событие «ПриИзменении» поля ввода для реквизита «ТипЦен», как показано на следующем рисунке:

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

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

ПРАВИЛО №2. Процедуры-обработчики событий, расположенные в модуле приложения, модуле внешнего соединения, модуле прикладного объекта должны называться точно так, как называются соответствующие события.

Поясним это правило на конкретных примерах:

1. Процедуры-обработчики событий, расположенные в модуле приложения или модуле внешнего соединения, совпадают с именами событий:

• ПередНачаломРаботыСистемы
• ПриНачалеРаботыСистемы
• ПриЗавершенииРаботыСистемы
• ПередЗавершениемРаботыСистемы
• ОбработкаВнешнегоСобытия

2. Имена процедур-обработчиков событий, расположенных в модуле объекта, тоже строго соответствуют именам событий:

для модуля документа (события объекта типа «ДокументОбъект»)

• ПередЗаписью
• ПриЗаписи
• ПриУдалении
• ПриКопировании
• ОбработкаЗаполнения (для обработки «ввода на основании»)
• ОбработкаПроведения
• ОбработкаУдаленияПроведения
• ПриУстановкеНовогоНомера

Аналогичные обработчики событий могут располагаться в модуле справочника и модулях других прикладных объектов.

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

• ПередЗаписью
• ПриЗаписи

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

Примечание 1. Событие ПередЗаписью прикладного объекта отличается от события ПередЗаписью формы, связанной с этим прикладным объектом. Обработчик события в модуле формы вызывается при интерактивной записи, а обработчик в модуле объекта при любом способе записи элемента в базу данных.

Примечание 2. Если в процедурах-обработчиках модуля объекта нужно обратиться к самому объекту (текущий элемент справочника, текущий документ и т.д.), то для этого можно использовать свойство ЭтотОбъект. Оно содержит объект типа «СправочникОбъект», «ДокументОбъект» и т.д.

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

Создание обработчиков событий в проектах Office

Существует несколько способов создания обработчиков событий в Visual Basic и C#. В режиме конструктора можно создать обработчики событий по умолчанию для элементов управления, дважды щелкнув элемент управления, или использовать область событий окна «Свойства » для создания обработчиков для любого события в элементе управления. Однако, если вы находитесь в представлении кода, может не потребоваться переключиться на представление конструктора для создания обработчика событий.

Область применения. Сведения в этом разделе относятся к проектам уровня документа и проектам надстроек VSTO. См. сведения о функциях, доступных по Приложение Office и типу проекта.

Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация среды IDE.

Создание обработчика событий в Visual Basic

1. В раскрывающемся списке «Имя класса» в верхней части редактора кода выберите объект, для которого требуется создать обработчик событий.

Примечание. Если вы хотите создать обработчики событий для ThisDocument или ThisWorkbook , необходимо выбрать (События ThisDocument) или (ThisWorkbook Events) в раскрывающемся списке «Имя класса»

Создание обработчика событий в C#

1. Создайте делегат события в событии запуска класса, введя полное имя события, за которым следует пробел, а затем введите += без пробела. Например: this.. +=
2. В конце строки кода дважды нажмите клавишу TAB. Visual Studio автоматически завершает строку кода, создает обработчик событий и перемещает точку вставки в только что созданный обработчик событий.

Связанный контент

• Написание кода в решениях Office
• Пошаговое руководство. Программа для событий элемента управления NamedRange
• Создание решений Office

Вызов обработчика событий в 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, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.

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

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

• click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
• contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
• mouseover / mouseout – когда мышь наводится на / покидает элемент.
• mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
• mousemove – при движении мыши.

События на элементах управления:

• submit – пользователь отправил форму .
• focus – пользователь фокусируется на элементе, например нажимает на .

Клавиатурные события:

• keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

• DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

• transitionend – когда CSS-анимация завершена.

Существует множество других событий. Мы подробно разберём их в последующих главах.

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

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

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

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

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .

Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on .

К примеру, elem.onclick :

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

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

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

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

function sayThanks() < alert('Спасибо!'); >elem.onclick = sayThanks;

Убрать обработчик можно назначением elem.onclick = null .

Доступ к элементу через this

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде ниже button выводит своё содержимое, используя this.innerHTML :

Нажми меня

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks , а не sayThanks() .

// правильно button.onclick = sayThanks; // неправильно button.onclick = sayThanks();

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .

Так что разметка генерирует такое свойство:

button.onclick = function() < sayThanks(); // содержимое атрибута >;

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте setAttribute для обработчиков.

Такой вызов работать не будет:

// при нажатии на body будут ошибки, // атрибуты всегда строки, и функция станет строкой document.body.setAttribute('onclick', function() < alert(1) >);

Регистр DOM-свойства имеет значение.

Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика – невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

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

input.onclick = function() < alert(1); >// . input.onclick = function() < alert(2); >// заменит предыдущий обработчик

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.

Синтаксис добавления обработчика:

element.addEventListener(event, handler, [options]);

• once : если true , тогда обработчик будет автоматически удалён после выполнения.
• capture : фаза, на которой должен сработать обработчик, подробнее об этом будет рассказано в главе Всплытие и погружение. Так исторически сложилось, что options может быть false/true , это то же самое, что .
• passive : если true , то указывает, что обработчик никогда не вызовет preventDefault() , подробнее об этом будет рассказано в главе Действия браузера по умолчанию.

Для удаления обработчика следует использовать removeEventListener :

element.removeEventListener(event, handler, [options]);

Удаление требует именно ту же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

elem.addEventListener( "click" , () => alert('Спасибо!')); // . elem.removeEventListener( "click", () => alert('Спасибо!'));

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

Вот так правильно:

function handler() < alert( 'Спасибо!' ); >input.addEventListener("click", handler); // . input.removeEventListener("click", handler);

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

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Обработчики некоторых событий можно назначать только через addEventListener

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .

Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.

document.onDOMContentLoaded = function() < alert("DOM построен"); // не будет работать >;

document.addEventListener("DOMContentLoaded", function() < alert("DOM построен"); // а вот так сработает >);

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Объект события

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

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта event :

event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

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

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект event , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .

Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.

Мы также можем использовать класс для этого:

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.

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

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Итого

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick=». » .
2. DOM-свойство: elem.onclick = function .
3. Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

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

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, например, DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.

Мы изучим больше о событиях и их типах в следующих главах.