|
4 | 4 |
|
5 | 5 | ## Событие: change |
6 | 6 |
|
7 | | -Событие [change] (http://www.w3.org/TR/html5/forms.html#event-input-change) срабатывает по окончании изменения элемента. |
| 7 | +Событие [change](http://www.w3.org/TR/html5/forms.html#event-input-change) срабатывает по окончании изменения элемента. |
8 | 8 |
|
9 | | -Для текстовых инпутов это означает, что событие происходит при потере фокуса. |
| 9 | +Для текстовых полей это означает, что событие происходит при потере фокуса. |
10 | 10 |
|
11 | | -Например, пока мы печатаем в текстовом поле в примере ниже, события нет. Но когда мы перемещаем фокус, например, в другое место, нажмите на кнопку - произойдёт событие `change`: |
| 11 | +Пока мы печатаем в текстовом поле в примере ниже, событие не происходит. Но когда мы перемещаем фокус в другое место, например, нажимая на кнопку, то произойдёт событие `change`: |
12 | 12 |
|
13 | 13 | ```html autorun height=40 run |
14 | 14 | <input type="text" onchange="alert(this.value)"> |
15 | 15 | <input type="button" value="Button"> |
16 | 16 | ``` |
17 | 17 |
|
18 | | -Для других элементов: `select`, `input type=checkbox/radio` событие запускается сразу после изменения выбора. |
| 18 | +Для других элементов: `select`, `input type=checkbox/radio` событие запускается сразу после изменения значения. |
19 | 19 |
|
20 | 20 | ## Событие: input |
21 | 21 |
|
|
34 | 34 |
|
35 | 35 | Если мы хотим обрабатывать каждое изменение в `<input>`, то это событие является лучшим выбором. |
36 | 36 |
|
37 | | -В отличие от клавиатурных событий, он работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи для диктата текста. |
| 37 | +В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста. |
38 | 38 |
|
39 | 39 | ```smart header="Нельзя ничего предотвратить в `oninput`" |
40 | 40 | Событие `input` происходит после изменения значения. |
|
44 | 44 |
|
45 | 45 | ## События: cut, copy, paste |
46 | 46 |
|
47 | | -Эти события происходят при вырезании/копировании/вставке значения. |
| 47 | +Эти события происходят при при вырезании/копировании/вставке данных. |
48 | 48 |
|
49 | | -Они относятся к классу [ClipboardEvent] (https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) и обеспечивают доступ к копируемым/вставляемым данным. |
| 49 | +Они относятся к классу [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) и обеспечивают доступ к копируемым/вставляемым данным. |
50 | 50 |
|
51 | | -Мы также можем использовать `event.preventDefault()` для прерывания действия. |
| 51 | +Мы также можем использовать `event.preventDefault()` для предотвращения действия по умолчанию. |
52 | 52 |
|
53 | 53 | Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить: |
54 | 54 |
|
|
62 | 62 | </script> |
63 | 63 | ``` |
64 | 64 |
|
65 | | -Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл в файловый менеджер ОС и вставить его. |
| 65 | +Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл из файловой системы и вставить его. |
66 | 66 |
|
67 | 67 | Существует список методов [в спецификации] (https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) для работы с различными типами данных, чтения/записи в буфер обмена. |
68 | 68 |
|
69 | | -Но обратите внимание, что буфер обмена - это "глобальный" уровень ОС. Большинство браузеров разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя для безопасности. Также запрещается создавать "пользовательские" события буфера обмена во всех браузерах, кроме Firefox. |
| 69 | +Но обратите внимание, что буфер обмена работает глобально, на уровне ОС. Большинство браузеров в целях безопасности разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя. Также запрещается создавать "пользовательские" события буфера обмена во всех браузерах, кроме Firefox. |
70 | 70 |
|
71 | 71 | ## Итого |
72 | 72 |
|
73 | 73 | События изменения данных: |
74 | 74 |
|
75 | 75 | | Событие | Описание | Особенности | |
76 | 76 | |---------|----------|-------------| |
77 | | -| `change`| Значение было изменено. | Для текстовых входов срабатывает при потере фокуса. | |
| 77 | +| `change`| Значение было изменено. | Для текстовых полей срабатывает при потере фокуса. | |
78 | 78 | | `input` | Для ввода текста при каждом изменении. | Запускается немедленно, в отличие от `change`. | |
79 | 79 | | `cut/copy/paste` | Действия по вырезанию/копированию/вставке. | Действие можно предотвратить. Свойство `event.clipboardData` предоставляет доступ на чтение/запись в буфер обмена.. | |
0 commit comments