added examles

js/element-addeventlistener/index.md

@@ -6,6 +6,7 @@ authors:
 contributors:
   - nlopin
   - skorobaeus
+  - vladislav149
 related:
   - js/dom
   - js/events
@@ -55,7 +56,7 @@ element.addEventListener('click', function (event) {
 
 🤖 Заранее созданные функции обычно используют, когда функция содержит в себе много кода или к ней нужно ссылаться несколько раз. Например, когда нужно отписаться от события позже. Для отписки используется метод элемента [`Element.removeEventListener()`](/js/element-removeeventlistener/).
 
-Второй способ отписки от события можно реализовать с помощью объекта AbortController.
+Альтернативный способ отписки от события можно реализовать с помощью объекта AbortController.
 
 Анонимные функции удобно использовать при быстрой разработке или когда обработчик создаётся в одном единственном месте и выносить его в отдельную именованную функцию — дольше, чем писать код самой этой функции. В этом случае очень часто используют короткую, стрелочную запись функции:
 

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,
+})
+
+// Вызываем когда захотим отписаться:
+controller.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`
+
+В случае, если необходимо реализовать логику после отписки, то используя `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