minor rephrasings

Author: iliakan

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

@@ -1,16 +1,12 @@
-# Mouse events basics
+# Mouse events
 
 In this chapter we'll get into more details about mouse events and their properties.
 
 Please note: such events may come not only from "mouse devices", but are also from other devices, such as phones and tablets, where they are emulated for compatibility.
 
 ## Mouse event types
 
-We can split mouse events into two categories: "simple" and "complex"
-
-### Simple events
-
-The most used simple events are:
+We've already seen some of these events:
 
 `mousedown/mouseup`
 : Mouse button is clicked/released over an element.
@@ -21,28 +17,24 @@ The most used simple events are:
 `mousemove`
 : Every mouse move over an element triggers that event.
 
-`contextmenu`
-: Triggers when opening a context menu is attempted. In the most common case, that happens when the right mouse button is pressed. Although, there are other ways to open a context menu, e.g. using a special keyboard key, so it's not exactly the mouse event.
-
-...There are several other event types too, we'll cover them later.
-
-### Complex events
-
 `click`
 : Triggers after `mousedown` and then `mouseup` over the same element if the left mouse button was used.
 
 `dblclick`
-: Triggers after a double click over an element.
+: Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays.
 
-Complex events are made of simple ones, so in theory we could live without them. But they exist, and that's good, because they are convenient.
+`contextmenu`
+: Triggers when when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event.
 
-### Events order
+...There are several other events too, we'll cover them later.
 
-An action may trigger multiple events.
+## Events order
 
-For instance, a click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released.
+As you can see from the list above, a user action may trigger multiple events.
 
-In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`.
+For instance, a left-button click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released.
+
+In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. 
 
 ```online
 Click the button below and you'll see the events. Try double-click too.
@@ -54,7 +46,7 @@ Also we can see the `which` property that allows to detect the mouse button.
 <input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Click me with the right or the left mouse button" type="button"> <input onclick="logClear('test')" value="Clear" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
 ```
 
-## Getting the button: which
+## Mouse button: "which"
 
 Click-related events always have the `which` property, which allows to get the exact mouse button.
 
@@ -116,17 +108,25 @@ For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`.
 ```
 
 ```warn header="There are also mobile devices"
-Keyboard combinations are good as an addition to the workflow. So that if the visitor has a keyboard -- it works. And if their device doesn't have it -- then there should be another way to do the same.
+Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. 
+
+But if their device doesn't have it -- then there should be a way to live without modifier keys.
 ```
 
 ## Coordinates: clientX/Y, pageX/Y
 
-All mouse events have coordinates in two flavours:
+All mouse events provide coordinates in two flavours:
 
 1. Window-relative: `clientX` and `clientY`.
 2. Document-relative: `pageX` and `pageY`.
 
-For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`. And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is, how far the document was scrolled. They are similar to `position:fixed`.
+We already covered the difference between them in the chapter <info:coordinates>.
+
+In short, document-relative coordinates `pageX/Y` are counted from the left-upper corner of the document, and do not change when the page is scrolled, while `clientX/Y` are counted from the current window left-upper corner. When the page is scrolled, they change.
+
+For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then `clientX` and `clientY` are `0`, no matter how the page is scrolled. 
+
+And if the mouse is in the center, then `clientX` and `clientY` are `250`, no matter what place in the document it is. They are similar to `position:fixed` in that aspect.
 
 ````online
 Move the mouse over the input field to see `clientX/clientY` (the example is in the `iframe`, so coordinates are relative to that `iframe`):
@@ -136,11 +136,9 @@ Move the mouse over the input field to see `clientX/clientY` (the example is in
 ```
 ````
 
-Document-relative coordinates `pageX`, `pageY` are counted from the left-upper corner of the document, not the window. You can read more about coordinates in the chapter <info:coordinates>.
-
-## Disabling selection
+## Preventing selection on mousedown
 
-Double mouse click has a side-effect that may be disturbing in some interfaces: it selects the text.
+Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text.
 
 For instance, a double-click on the text below selects it in addition to our handler: