Skip to content
Open
Changes from all commits
Commits
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
14 changes: 7 additions & 7 deletions 2-ui/2-events/04-default-browser-action/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,18 +76,18 @@ menu.onclick = function(event) {
Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.

````smart header="События, вытекающие из других"
Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.
Некоторые события естественным образом вытекают друг из друга. Если мы отменим действие браузера по умолчанию для первого события, то последующие могут не произойти.

Например, событие `mousedown` для поля `<input>` приводит к фокусировке на нём и запускает событие `focus`. Если мы отменим событие `mousedown`, то фокусирования не произойдёт.
Например, событие `mousedown` для поля `<input>` приводит к фокусировке на нём и запускает событие `focus`. Но при отмене действия по умолчанию для события `mousedown` фокусирования не произойдёт.

В следующем примере попробуйте нажать на первом `<input>` -- происходит событие `focus`. Но если вы нажимаете по второму элементу, то события `focus` не будет.
В следующем примере попробуйте кликнуть на первом `<input>` -- происходит событие `focus`. Но при клике по второму инпуту события `focus` не будет.

```html run autorun
<input value="Фокус работает" onfocus="this.value=''">
<input *!*onmousedown="return false"*/!* onfocus="this.value=''" value="Кликни меня">
```

Это потому, что отменено стандартное действие `mousedown`. Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши `key:Tab` можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.
Это потому, что отменено стандартное действие браузера для `mousedown`. Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши `key:Tab` можно перейти от первого поля ввода ко второму. Но только не через клик мышью по элементу, это больше не работает.
````

## Опция "passive" для обработчика
Expand All @@ -111,13 +111,13 @@ menu.onclick = function(event) {

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе <info:bubbling-and-capturing> мы говорили о `event.stopPropagation()` и упоминали, что останавливать "всплытие" - плохо?
Помните, в главе <info:bubbling-and-capturing> мы говорили о `event.stopPropagation()` и упоминали, что останавливать всплытие - плохо?

Иногда вместо этого мы можем использовать `event.defaultPrevented`, чтобы просигналить другим обработчикам, что событие обработано.

Давайте посмотрим практический пример.

По умолчанию браузер при событии `contextmenu` (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:
По умолчанию браузер при событии `contextmenu` (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить действие по умолчанию и показать своё меню, как здесь:

```html autorun height=50 no-beautify run
<button>Правый клик вызывает контекстное меню браузера</button>
Expand Down Expand Up @@ -229,7 +229,7 @@ menu.onclick = function(event) {

Опция `passive: true` для `addEventListener` сообщает браузеру, что действие по умолчанию не будет отменено. Это очень полезно для некоторых событий на мобильных устройствах, таких как `touchstart` и `touchmove`, чтобы сообщить браузеру, что он не должен ожидать выполнения всех обработчиков, а ему следует сразу приступать к выполнению действия по умолчанию, например, к прокрутке.

Если событие по умолчанию отменено, то значение `event.defaultPrevented` становится `true`, иначе `false`.
Если действие по умолчанию отменено, то значение `event.defaultPrevented` становится `true`, иначе `false`.

```warn header="Сохраняйте семантику, не злоупотребляйте"
Технически, отменяя действия браузера по умолчанию и добавляя JavaScript, мы можем настроить поведение любого элемента. Например, мы можем заставить ссылку `<a>` работать как кнопку, а кнопку `<button>` вести себя как ссылка (перенаправлять на другой URL).
Expand Down