diff --git a/js/element-addeventlistener/index.md b/js/element-addeventlistener/index.md index ef647e9a67..2c58fde8ba 100644 --- a/js/element-addeventlistener/index.md +++ b/js/element-addeventlistener/index.md @@ -6,6 +6,7 @@ authors: contributors: - nlopin - skorobaeus + - vladislav149 related: - js/dom - js/events @@ -55,6 +56,8 @@ element.addEventListener('click', function (event) { 🤖 Заранее созданные функции обычно используют, когда функция содержит в себе много кода или к ней нужно ссылаться несколько раз. Например, когда нужно отписаться от события позже. Для отписки используется метод элемента [`Element.removeEventListener()`](/js/element-removeeventlistener/). +Альтернативный способ отписки от события можно реализовать с помощью объекта `AbortController`. Подробнее о нём читайте в разделе «На практике». + Анонимные функции удобно использовать при быстрой разработке или когда обработчик создаётся в одном единственном месте и выносить его в отдельную именованную функцию — дольше, чем писать код самой этой функции. В этом случае очень часто используют короткую, стрелочную запись функции: ```js @@ -76,9 +79,10 @@ element.addEventListener(eventType, handler, options) - `handler` — функция, которая будет вызвана, когда событие произойдёт. - `options/capture` — необязательный параметр, который описывает дополнительные свойства для срабатывания события. - `capture` — включает или выключает захват события элементом, на который установлен обработчик. Это значит, что событие сначала сработает на элементе и только потом сработает на всех вложенных элементах. Принимает значение `true` или `false` - - `options: { capture: bool, passive: bool, once: bool }` — при передаче объекта аргумент будет распознан как объект настроек, так можно установить больше параметров. - - `passive` – говорит о том, что внутри `handler` никогда не будет вызвана функция `event.preventDefault()`, если функция `event.preventDefault()` все-таки вызвана, браузер должен её игнорировать и выводить предупредительное сообщение в консоль. - - `once` – включает автоматическую отписку от события после первого срабатывания. + - `options: { capture: bool, passive: bool, once: bool, signal: AbortSignal }` — при передаче объекта аргумент будет распознан как объект настроек, так можно установить больше параметров. + - `passive` — говорит о том, что внутри `handler` никогда не будет вызвана функция `event.preventDefault()`, если функция `event.preventDefault()` всё-таки вызвана, браузер должен её игнорировать и выводить предупредительное сообщение в консоль. + - `once` — включает автоматическую отписку от события после первого срабатывания. + - `signal` — передаётся ссылка на объект сигнала `AbortSignal`, который позволяет отписаться от события. Ниже приведено несколько вариантов вызова функции с разными параметрами: @@ -94,6 +98,12 @@ window.addEventListener('click', handleMouseClick, { passive: true, capture: false, }) + +const abortController = new AbortController() + +window.addEventListener('click', handleMouseClick, { + signal: abortController.signal +}) ``` У объекта event есть специальные методы, такие как `preventDefault()` и `stopPropagation()`. Остальные методы практически не используются: diff --git a/js/element-addeventlistener/practice/vladislav149.md b/js/element-addeventlistener/practice/vladislav149.md new file mode 100644 index 0000000000..15e67e39f3 --- /dev/null +++ b/js/element-addeventlistener/practice/vladislav149.md @@ -0,0 +1,48 @@ +🛠 Базовый пример использования `AbortController` для отписки от слушателя событий. + +По умолчанию в большинстве случаев для отписки стоит использовать `removeEventListener`. Но, если при подписке была использована анонимная функция, то отписаться от такого слушателя через `removeEventListener` не получится, так как вторым параметром необходимо передать ссылку на функцию-обработчик. + +```js +const abortController = new AbortController() +const element = document.querySelector('#element1') + +element.addEventListener('click', () => console.log('Подписка активна'), { + signal: abortController.signal +}) + +// Вызываем, когда захотим отписаться: +abortController.abort() +``` + +🛠 Отписка сразу от нескольких обработчиков. + +`AbortController` может быть удобнее, чем `removeEventListener` в случае, если нам нужно отписаться сразу от нескольких обработчиков: + +```js +const abortController = new AbortController() +const element1 = document.querySelector('#element1') +const element2 = document.querySelector('#element2') + +element1.addEventListener('click', () => { + // ... +}, {signal: abortController.signal}) +element2.addEventListener('click', () => { + // ... +}, {signal: abortController.signal}) + +// Отписываемся одним вызовом сразу от двух обработчиков +abortController.abort() +``` + +🛠 Вешаем слушатель событий на `AbortController`. + +В случае, если необходимо реализовать логику после отписки, то можно слушать событие `abort` на `AbortSignal`: + +```js +const abortController = new AbortController() +const signal = abortController.signal + +signal.addEventListener('abort', () => { + console.log('Операция отменена') +}) +``` diff --git a/people/vladislav149/index.md b/people/vladislav149/index.md new file mode 100644 index 0000000000..2fb3f7c57f --- /dev/null +++ b/people/vladislav149/index.md @@ -0,0 +1,7 @@ +--- +name: 'Окенчиц Владислав' +url: https://t.me/Vlad_Okenchits +photo: 'photo.jpg' +--- + +Senior Frontend Developer diff --git a/people/vladislav149/photo.jpg b/people/vladislav149/photo.jpg new file mode 100644 index 0000000000..9ba504b9a7 Binary files /dev/null and b/people/vladislav149/photo.jpg differ