Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
10 changes: 9 additions & 1 deletion js/element-addeventlistener/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ element.addEventListener('click', function (event) {

🤖 Заранее созданные функции обычно используют, когда функция содержит в себе много кода или к ней нужно ссылаться несколько раз. Например, когда нужно отписаться от события позже. Для отписки используется метод элемента [`Element.removeEventListener()`](/js/element-removeeventlistener/).

Второй способ отписки от события можно реализовать с помощью объекта AbortController.
TatianaFokina marked this conversation as resolved.
Show resolved Hide resolved

Анонимные функции удобно использовать при быстрой разработке или когда обработчик создаётся в одном единственном месте и выносить его в отдельную именованную функцию — дольше, чем писать код самой этой функции. В этом случае очень часто используют короткую, стрелочную запись функции:

```js
Expand All @@ -76,9 +78,10 @@ element.addEventListener(eventType, handler, options)
- `handler` — функция, которая будет вызвана, когда событие произойдёт.
- `options/capture` — необязательный параметр, который описывает дополнительные свойства для срабатывания события.
- `capture` — включает или выключает захват события элементом, на который установлен обработчик. Это значит, что событие сначала сработает на элементе и только потом сработает на всех вложенных элементах. Принимает значение `true` или `false`
- `options: { capture: bool, passive: bool, once: bool }` — при передаче объекта аргумент будет распознан как объект настроек, так можно установить больше параметров.
- `options: { capture: bool, passive: bool, once: bool, signal: AbortSignal }` — при передаче объекта аргумент будет распознан как объект настроек, так можно установить больше параметров.
- `passive` – говорит о том, что внутри `handler` никогда не будет вызвана функция `event.preventDefault()`, если функция `event.preventDefault()` все-таки вызвана, браузер должен её игнорировать и выводить предупредительное сообщение в консоль.
- `once` – включает автоматическую отписку от события после первого срабатывания.
- `signal` - передается ссылка на объект сигнала `AbortSignal`, который позволяет отписаться от события.
vladislav149 marked this conversation as resolved.
Show resolved Hide resolved

Ниже приведено несколько вариантов вызова функции с разными параметрами:

Expand All @@ -94,6 +97,11 @@ window.addEventListener('click', handleMouseClick, {
passive: true,
capture: false,
})

const abortController = new AbortController()
window.addEventListener('click', handleMouseClick, {
signal: abortController.signal,
})
vladislav149 marked this conversation as resolved.
Show resolved Hide resolved
```

У объекта event есть специальные методы, такие как `preventDefault()` и `stopPropagation()`. Остальные методы практически не используются:
Expand Down
Loading