Дополняет описание options в доке .addEventListener()

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()`. Остальные методы практически не используются:

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('Операция отменена')
+})
+```

people/vladislav149/index.md

@@ -0,0 +1,7 @@
+---
+name: 'Окенчиц Владислав'
+url: https://t.me/Vlad_Okenchits
+photo: 'photo.jpg'
+---
+
+Senior Frontend Developer