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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обработчики Событий в 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 примера)

Реакция на события¶

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

• Различные способы написания обработчика событий
• Как передать логику обработки событий от родительского компонента
• Как распространяются события и как их остановить

Добавление обработчиков событий¶

Чтобы добавить обработчик событий, вы сначала определите функцию, а затем передадите ее как параметр в соответствующий JSX тег. Например, вот кнопка, которая еще ничего не делает:

App.js Результат

1 2 3

export default function Button()  return button>I don't do anything/button>; > 

Вы можете заставить его показывать сообщение, когда пользователь нажимает на кнопку, выполнив следующие три шага:

1. Объявите функцию handleClick внутри вашего компонента Button .
2. Реализуйте логику внутри этой функции (используйте alert для показа сообщения).
3. Добавьте onClick= в JSX .

App.js Результат

1 2 3 4 5 6 7

export default function Button()  function handleClick()  alert('You clicked me!'); > return button onClick=handleClick>>Click me/button>; > 

Вы определили функцию handleClick , а затем передали ее как параметр в . handleClick — это обработчик события. Функции обработчика события:

• Обычно определяются внутри ваших компонентов.
• Имеют имена, начинающиеся с handle , за которым следует имя события.

По традиции, принято называть обработчики событий handle , за которым следует имя события. Часто можно встретить onClick= , onMouseEnter= и так далее.

В качестве альтернативы вы можете определить обработчик события в JSX:

1 2 3

button onClick=function handleClick()  alert('You clicked me!'); >>> 

Или, более кратко, с помощью стрелочной функции:

1 2 3

button onClick= =>  alert('You clicked me!'); >>> 

Все эти стили эквивалентны. Инлайн-обработчики событий удобны для коротких функций.

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

передача функции (правильно)	вызов функции (неправильно)
>	>

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

Во втором примере () в конце handleClick() запускает функцию непосредственно во время rendering, без каких-либо кликов. Это происходит потому, что JavaScript внутри JSX выполняется сразу же.

Когда вы пишете код inline, тот же самый подводный камень проявляется по-другому:

передача функции (правильно)	вызов функции (неправильно)
alert(‘. ‘)>>	>

Передача встроенного кода таким образом не срабатывает по щелчку — он срабатывает каждый раз, когда компонент отображается:

// This alert fires when the component renders, not when clicked! button onClick=alert('You clicked me!')>> 

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

button onClick= => alert('You clicked me!')>> 

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

В обоих случаях вы хотите передать функцию:

• > передает функцию handleClick .
• alert(‘. ‘)>> передает функцию () => alert(‘. ‘) .

Чтение пропсов в обработчиках событий¶

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

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function AlertButton( message, children >)  return ( button onClick= => alert(message)>> children> /button> ); > export default function Toolbar()  return ( div> AlertButton message="Playing!"> Play Movie /AlertButton> AlertButton message="Uploading!"> Upload Image /AlertButton> /div> ); > 

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

Передача обработчиков событий как пропсов¶

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

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

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

function Button( onClick, children >)  return button onClick=onClick>>children>/button>; > function PlayButton( movieName >)  function handlePlayClick()  alert(`Playing $movieName>!`); > return ( Button onClick=handlePlayClick>> Play "" /Button> ); > function UploadButton()  return ( Button onClick= => alert('Uploading!')>> Upload Image /Button> ); > export default function Toolbar()  return ( div> PlayButton movieName="Kiki's Delivery Service" /> UploadButton /> /div> ); > 

Здесь компонент Toolbar отображает PlayButton и UploadButton :

• PlayButton передает handlePlayClick как свойство onClick для Button внутри.
• UploadButton передает () => alert(‘Uploading!’) как свойство onClick внутренней кнопке .

Наконец, ваш компонент Button принимает свойство onClick . Он передает это свойство непосредственно встроенному браузеру с onClick= . Это указывает React на вызов переданной функции по щелчку.

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

Именование параметров обработчика событий¶

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

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

Например, пропс onClick компонента Button можно было бы назвать onSmash :

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function Button( onSmash, children >)  return button onClick=onSmash>>children>/button>; > export default function App()  return ( div> Button onSmash= => alert('Playing!')>> Play Movie /Button> Button onSmash= => alert('Uploading!')>> Upload Image /Button> /div> ); > 

В этом примере > показывает, что браузеру (строчная буква) по-прежнему нужен пропс onClick , но имя пропса, полученное вашим пользовательским компонентом Button , зависит от вас!

Если ваш компонент поддерживает множество взаимодействий, вы можете назвать пропсы обработчиков событий для концепций, специфичных для конкретного приложения. Например, компонент Toolbar получает обработчики событий onPlayMovie и onUploadImage :

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

export default function App()  return ( Toolbar onPlayMovie= => alert('Playing!')> onUploadImage= => alert('Uploading!')> /> ); > function Toolbar( onPlayMovie, onUploadImage >)  return ( div> Button onClick=onPlayMovie>> Play Movie /Button> Button onClick=onUploadImage>> Upload Image /Button> /div> ); > function Button( onClick, children >)  return button onClick=onClick>>children>/button>; > 

Обратите внимание, что компоненту App не нужно знать, что Toolbar будет делать с onPlayMovie или onUploadImage . Это деталь реализации Toolbar . Здесь Toolbar передает их как обработчики onClick для своих Button , но позже он также может вызвать их по нажатию клавиш. Именование пропсов в честь специфических для приложения взаимодействий, таких как onPlayMovie , дает вам возможность гибко изменять их использование в дальнейшем.

Убедитесь, что вы используете соответствующие HTML-теги для обработчиков событий. Например, для обработки кликов используйте > вместо > . Использование настоящего браузерного позволяет использовать встроенные поведенческие характеристики браузера, такие как навигация по клавиатуре. Если вам не нравится стандартная стилизация кнопки в браузере и вы хотите сделать ее более похожей на ссылку или другой элемент пользовательского интерфейса, вы можете добиться этого с помощью CSS. Узнайте больше о написании доступной разметки.

Распространение событий¶

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

Этот содержит две кнопки. И и каждая кнопка имеют свои собственные обработчики onClick . Как вы думаете, какие обработчики сработают при нажатии на кнопку?

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

export default function Toolbar()  return ( div className="Toolbar" onClick= =>  alert('You clicked on the toolbar!'); >> > button onClick= => alert('Playing!')>> Play Movie /button> button onClick= => alert('Uploading!')>> Upload Image /button> /div> ); > 

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

Все события распространяются в React, кроме onScroll , которое действует только на тег JSX, к которому вы его прикрепили.

Остановка распространения¶

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

Этот объект события также позволяет остановить распространение. Если вы хотите, чтобы событие не достигло родительских компонентов, вам нужно вызвать e.stopPropagation() , как это делает компонент Button :

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

function Button( onClick, children >)  return ( button onClick=<(e) =>  e.stopPropagation(); onClick(); >> > children> /button> ); > export default function Toolbar()  return ( div className="Toolbar" onClick= =>  alert('You clicked on the toolbar!'); >> > Button onClick= => alert('Playing!')>> Play Movie /Button> Button onClick= => alert('Uploading!')>> Upload Image /Button> /div> ); > 

Когда вы нажимаете на кнопку:

1. React вызывает обработчик onClick , переданный в .
2. Этот обработчик, определенный в Button , делает следующее:
   • Вызывает e.stopPropagation() , предотвращая дальнейшее распространение события.
   • Вызывает функцию onClick , которая является пропсом, переданным из компонента Toolbar .
3. Эта функция, определенная в компоненте Toolbar , отображает собственное оповещение кнопки.
4. Поскольку распространение было остановлено, обработчик onClick родительского не выполняется.

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

Захват фазовых событий

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

1 2 3 4 5 6 7 8

div onClickCapture= =>  /* this runs first */ >> > button onClick=<(e) => e.stopPropagation()> /> button onClick=<(e) => e.stopPropagation()> /> /div> 

Каждое событие распространяется в три фазы:

1. Оно перемещается вниз, вызывая все обработчики onClickCapture .
2. Запускается обработчик onClick щелкнутого элемента.
3. Он перемещается вверх, вызывая все обработчики onClick .

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

Передача обработчиков как альтернатива распространению¶

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

 1 2 3 4 5 6 7 8 9 10 11 12

function Button( onClick, children >)  return ( button onClick=<(e) =>  e.stopPropagation(); onClick(); >> > children> /button> ); > 

Вы можете добавить больше кода в этот обработчик перед вызовом обработчика родительского события onClick . Этот паттерн обеспечивает альтернативу распространению. Он позволяет дочернему компоненту обрабатывать событие, в то же время позволяя родительскому компоненту задать дополнительное поведение. В отличие от распространения, он не является автоматическим. Но преимущество этого паттерна в том, что вы можете четко проследить всю цепочку кода, который выполняется в результате какого-то события.

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

Предотвращение поведения по умолчанию¶

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

App.js Результат

1 2 3 4 5 6 7 8

export default function Signup()  return ( form onSubmit= => alert('Submitting!')>> input /> button>Send/button> /form> ); > 

Чтобы этого не произошло, можно вызвать e.preventDefault() на объекте события:

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13

export default function Signup()  return ( form onSubmit=<(e) =>  e.preventDefault(); alert('Submitting!'); >> > input /> button>Send/button> /form> ); > 

Не путайте e.stopPropagation() и e.preventDefault() . Они оба полезны, но не связаны между собой:

• e.stopPropagation() останавливает срабатывание обработчиков событий, прикрепленных к вышеуказанным тегам.
• e.preventDefault() предотвращает поведение браузера по умолчанию для тех немногих событий, в которых он есть.

Могут ли обработчики событий иметь побочные эффекты?¶

Конечно! Обработчики событий — лучшее место для побочных эффектов.

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

• Вы можете обрабатывать события, передавая функцию в качестве пропса элементу, например .
• Обработчики событий должны передаваться, а не вызываться! onClick= , а не onClick= .
• Вы можете определить функцию-обработчик события отдельно или в строке.
• Обработчики событий определяются внутри компонента, поэтому они могут обращаться к пропсам.
• Вы можете объявить обработчик событий в родительском компоненте и передать его в качестве пропса дочернему компоненту.
• Вы можете определить собственные пропсы обработчика событий с именами, специфичными для конкретного приложения.
• События распространяются вверх. Чтобы предотвратить это, вызовите e.stopPropagation() для первого аргумента.
• События могут иметь нежелательное поведение браузера по умолчанию. Вызовите e.preventDefault() , чтобы предотвратить это.
• Явный вызов свойства обработчика события из дочернего обработчика является хорошей альтернативой распространению.

Задачи¶

1. Исправьте обработчик события¶

Щелчок на этой кнопке должен переключить фон страницы между белым и черным. Однако при нажатии ничего не происходит. Исправьте проблему. (Не беспокойтесь о логике внутри handleClick — эта часть в порядке).

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

export default function LightSwitch()  function handleClick()  let bodyStyle = document.body.style; if (bodyStyle.backgroundColor === 'black')  bodyStyle.backgroundColor = 'white'; > else  bodyStyle.backgroundColor = 'black'; > > return ( button onClick=handleClick()>> Toggle the lights /button> ); > 

Показать решение

Проблема в том, что > вызывает функцию handleClick во время рендеринга вместо того, чтобы передать ее. Удаление вызова () , чтобы было > устраняет проблему:

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

export default function LightSwitch()  function handleClick()  let bodyStyle = document.body.style; if (bodyStyle.backgroundColor === 'black')  bodyStyle.backgroundColor = 'white'; > else  bodyStyle.backgroundColor = 'black'; > > return ( button onClick=handleClick>> Toggle the lights /button> ); > 

В качестве альтернативы можно обернуть вызов в другую функцию, например handleClick()>> :

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

export default function LightSwitch()  function handleClick()  let bodyStyle = document.body.style; if (bodyStyle.backgroundColor === 'black')  bodyStyle.backgroundColor = 'white'; > else  bodyStyle.backgroundColor = 'black'; > > return ( button onClick= => handleClick()>> Toggle the lights /button> ); > 

2. Подключение событий¶

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

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

App.js Результат

1 2 3

export default function ColorSwitch( onChangeColor >)  return button>Change color/button>; > 

Показать решение

Сначала нужно добавить обработчик события, например > .

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

App.js Результат

 1 2 3 4 5 6 7 8 9 10 11 12

export default function ColorSwitch( onChangeColor >)  return ( button onClick=<(e) =>  e.stopPropagation(); onChangeColor(); >> > Change color /button> ); > 

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

Во время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие — это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий.

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

Каждое событие имеет своё название. click — это нажатие левой кнопки мыши, keydown — нажатие клавиши, focus — появление в фокусе элемента формы, DOMContentLoaded — загрузка страницы.

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

Функция, которая выполняется при срабатывании события, называется обработчик события. Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick .

События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик — это не отдельная функция. Обработчик ставится на какой-то элемент страницы.

Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код обработчика пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click :

Кнопка

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

Обработчики событий являются свойствами DOM-объектов. В эти свойства можно записать функцию, и эта функция становится обработчиком события. Это самый распространённый способ установки обработчика. Добавим на страницу ещё одну кнопку и назначим ей обработчик через свойство:

Кнопка

11
12
13
14
15
16

let button = document.getElementById('button'); button.onclick = function() < alert('Нажата другая кнопка'); >;

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

Есть ещё один способ назначения обработчика. Он используется в более сложных скриптах. Создаётся обычная функция, а затем эта функция присваивается обработчику. Добавим на страницу кнопку и назначим ей обработчик с помощью функции:

Ещё онда кнопка

18
19
20
21
22
23
24

let Inform = function() < alert('Другая кнопка'); >; let newButton = document.getElementById('new_button'); newButton.onclick = Inform;

Когда функция присваивается обработчику, то после имени функции нет скобок. Если поставить скобки, то это будет не присваивание функции, а вызов на исполнение.

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

элемент.addEventListener (событие, функция)

событие — событие, которое нужно обрабатывать

функция — функция, которая становится обработчиком

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

Новая кнопка

27
28
29
30
31
32
33

let NewInform = function() < alert('Информация о нажатии кнопки'); >; let infButton = document.getElementById('inf_button'); infButton.addEventListener('click', NewInform);

Метод removeEventListener() позволяет удалить обработчик.

элемент.removeEventListener (событие, функция)

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

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

При каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.

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

Изменим обработчик для кнопки, у которой id равно «button». Получим доступ к объекту события и выведем тип события. Теперь обработчик будет выглядеть так:

button.onclick = function(event) < alert(event.type); >;

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

У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2023 © basecourse.ru Все права защищены