Skip to content

Dispatching custom events #268

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.

Sign up for GitHub

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

Merged
tarasyyyk merged 2 commits into from
Jan 20, 2022
Merged

Dispatching custom events #268

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
701a4fd
dispatching custom events
OlhaBrozhenets Jan 20, 2022
620b10c
edits dispatching custom events
OlhaBrozhenets Jan 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
edits dispatching custom events
  • Loading branch information
@OlhaBrozhenets
OlhaBrozhenets committed Jan 20, 2022
commit 620b10c5196b1338347e8340e7be441308917dc5
12 changes: 6 additions & 6 deletions 2-ui/2-events/05-dispatch-events/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ let event = new Event(type[, options]);

Потім обробники реагують на неї, як на звичайну подію браузера. Якщо подія була створена з прапором `bubbles`, вона спливає.

У наведеному нижче прикладі подія `click` ініціюється в JavaScript. Обробник працює так само, як якщо б натиснули кнопку:
У наведеному нижче прикладі подія `click` ініціюється в JavaScript. Обробник працює так само, як якщо б клікнули кнопку:

```html run no-beautify
<button id="elem" onclick="alert('Клік!');">Автоклік</button>
Expand Down Expand Up @@ -93,7 +93,7 @@ let event = new Event(type[, options]);

Ми повинні використовувати їх замість `new Event`, якщо ми хочемо створити такі події. Наприклад, `new MouseEvent("click")`

Правий конструктор дозволяє вказати стандартні властивості для цього типу події.
Правильний конструктор дозволяє вказати стандартні властивості для цього типу події.

Такі як `clientX/clientY` для події миші:

Expand Down Expand Up @@ -129,7 +129,7 @@ alert(event.clientX); // undefined, невідома властивість іг

Втім, ми можемо обійти це, призначивши `event.clientX=100` безпосередньо після створення об’єкта. Тож це питання зручності та дотримання правил. Події, створені браузером, завжди мають правильний тип.

Повний опис властивостей для різних події інтерфейсу користувача є в специфікації, наприклад, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
Повний опис властивостей для різних події інтерфейсу користувача є в специфікації, наприклад, [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).

## Користувацькі події

Expand Down Expand Up @@ -164,7 +164,7 @@ alert(event.clientX); // undefined, невідома властивість іг

Багато браузерів, які мають "типові дії", як-от перехід за посиланням, виділення тощо.

Для нових користувацьких подій, безумовно, немає дій браузера за замовчуванням, але код, який надсилає таку подію, може мати власні плани, що робити після ініціювання події.
Для нових користувацьких подій, безумовно, немає типових дій браузера, але код, який надсилає таку подію, може мати власні плани, що робити після ініціювання події.

Викликаючи `event.preventDefault()`, обробник події може надіслати сигнал про те, що ці дії слід скасувати.

Expand Down Expand Up @@ -212,7 +212,7 @@ alert(event.clientX); // undefined, невідома властивість іг

Як правило, події обробляються в черзі. Тобто: якщо браузер обробляє `onclick` і відбувається нова подія, напр. курсор було переміщено, тоді її обробка ставиться в чергу, відповідні обробники `mousemove` будуть викликані після завершення обробки `onclick`.

Помітним винятком є випадки, коли одна подія починається з іншої, напр. використовуючи `dispatchEvent`. Такі події обробляються негайно: викликаються нові обробники подій, а потім відновлюється обробка поточної події.
Винятком є випадки, коли одна подія починається з іншої, напр. використовуючи `dispatchEvent`. Такі події обробляються негайно: викликаються нові обробники подій, а потім відновлюється обробка поточної події.

Наприклад, у коді нижче подія `menu-open` ініціюється під час `onclick`.

Expand Down Expand Up @@ -244,7 +244,7 @@ alert(event.clientX); // undefined, невідома властивість іг

Це стосується не тільки `dispatchEvent`, є й інші випадки. Якщо обробник подій викликає методи, які викликають інші події, вони також обробляються синхронно, вкладеним способом.

Скажімо, нам це не подобається. Ми б хотіли, щоб спочатку повністю обробили `onclick`, незалежно від `menu-open` або будь-яких інших вкладених подій.
Скажімо, нам це не подобається. Ми б хотіли спочатку повністю обробити `onclick`, незалежно від `menu-open` або будь-яких інших вкладених подій.

Тоді ми можемо або помістити `dispatchEvent` (або інший виклик, що ініціює подію) в кінець `onclick`, або, можливо, краще, загорнути його в `setTimeout` з нульовою затримкою:

Expand Down