update article

Author: Rnbsov

2-ui/3-event-details/1-mouse-events-basics/article.md

@@ -6,11 +6,7 @@
 
 ## Типы событий мыши
 
-Мы можем разделить события мыши на две категории: "простые" и "комплексные".
-
-### Простые события
-
-Самые часто используемые простые события:
+Мы уже видели некоторые из этих событий:
 
 `mousedown/mouseup`
 : Кнопка мыши нажата/отпущена над элементом.
@@ -21,24 +17,20 @@
 `mousemove`
 : Каждое движение мыши над элементом генерирует это событие.
 
-`contextmenu`
-: Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.
-
-...Есть также несколько иных типов событий, которые мы рассмотрим позже.
-
-### Комплексные события
-
 `click`
 : Вызывается при `mousedown` , а затем `mouseup`  над одним и тем же элементом, если использовалась левая кнопка мыши.
 
 `dblclick`
 : Вызывается двойным кликом на элементе.
 
-Комплексные события состоят из простых, поэтому в теории мы могли бы без них обойтись. Но хорошо, что они существуют, потому что работать с ними очень удобно.
+`contextmenu`
+: Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.
+
+...Есть также несколько иных типов событий, которые мы рассмотрим позже.
 
-### Порядок событий
+## Порядок событий
 
-Одно действие может вызвать несколько событий.
+Как вы можете видеть из приведенного выше списка, действие пользователя может вызвать несколько событий.
 
 Например, клик мышью вначале вызывает `mousedown`, когда кнопка нажата, затем `mouseup` и `click`, когда она отпущена.
 
@@ -54,19 +46,37 @@
 <input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Кликни меня левой или правой кнопкой мыши" type="button"> <input onclick="logClear('test')" value="Очистить" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
 ```
 
-## Получение информации о кнопке: which
+## Кнопки мыши
+
+События, связанные с кликом, всегда имеют свойство `button`, которое позволяет получить конкретную кнопку мыши.
+
+Обычно мы не используем его для событий `click` и `contextmenu`, потому что первое происходит только при щелчке левой кнопкой мыши, а второе - только при щелчке правой кнопкой мыши.
 
-События, связанные с кликом, всегда имеют свойство `which`, которое позволяет определить нажатую кнопку мыши.
+С другой стороны, обработчикам `mousedown` и `mouseup` может потребоваться `event.button`, потому что эти события срабатывают на любую кнопку, таким образом `button` позволяет различать "нажатие правой кнопки" и "нажатие левой кнопки".
 
-Это свойство не используется для событий `click` и `contextmenu`, поскольку первое происходит только при нажатии левой кнопкой мыши, а второе -- правой.
+Возможными значениями `event.button` являются:
 
-Но если мы отслеживаем `mousedown` и `mouseup`, то оно нам нужно, потому что эти события срабатывают на любой кнопке, и `which` позволяет различать между собой "нажатие правой кнопки" и "нажатие левой кнопки".
+| Состояние кнопки | `event.button` |
+|--------------|----------------|
+| Левая кнопка (основная) | 0 |
+| Средняя кнопка (вспомогательная) | 1 |
+| Правая кнопка (вторичная) | 2 |
+| Кнопка X1 (назад) | 3 |
+| Кнопка X2 (вперед) | 4 |
 
-Есть три возможных значения:
+Большинство мышек имеют только левую и правую кнопку, поэтому возможные значения это 0 или 2. Сенсорные устройства также генерируют аналогичные события, когда кто-то нажимает на них.
 
-- `event.which == 1` -- левая кнопка
-- `event.which == 2` -- средняя кнопка
-- `event.which == 3` -- правая кнопка
+Также есть свойство `event.buttons`, в котором все нажатые в данный момент кнопки представлены в виде целого числа, по одному биту на кнопку. На практике это свойство используется очень редко, вы можете найти подробную информацию по адресу [MDN](mdn:/api/MouseEvent/buttons), если вам это когда-нибудь понадобится.
+
+```warn header="Устревшее свойство `event.which`"
+В старом коде вы можете встретить `event.which` свойство - это старый нестандартный способ получения кнопки с возможными значениями:
+
+- `event.which == 1` – левая кнопка,
+- `event.which == 2` – средняя кнопка,
+- `event.which == 3` – правая кнопка.
+
+На данный момент `event.which` устарел, нам не следует его использовать.
+```
 
 Средняя кнопка сейчас -- скорее экзотика, и используется очень редко.