improvements

2-ui/1-document/01-browser-environment/article.md

@@ -22,7 +22,7 @@ function sayHi() {
   alert("Hello");
 }
 
-// global functions are accessible as properties of window
+// global functions are methods of the global objecct:
 window.sayHi();
 ```
 

2-ui/2-events/05-dispatch-events/article.md

@@ -8,17 +8,17 @@ Also we can generate built-in events like `click`, `mousedown` etc, that may be
 
 ## Event constructor
 
-Events form a hierarchy, just like DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class.
+Build-in event classes form a hierarchy, similar to DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class.
 
 We can create `Event` objects like this:
 
 ```js
-let event = new Event(event type[, options]);
+let event = new Event(type[, options]);
 ```
 
 Arguments:
 
-- *event type* -- may be any string, like `"click"` or our own like `"hey-ho!"`.
+- *type* -- event type, a string like `"click"` or our own like `"my-event"`.
 - *options* -- the object with two optional properties:
   - `bubbles: true/false` -- if `true`, then the event bubbles.
   - `cancelable: true/false` -- if `true`, then the "default action"  may be prevented. Later we'll see what it means for custom events.
@@ -66,9 +66,13 @@ All we need is to set `bubbles` to `true`:
   // ...dispatch on elem!
   let event = new Event("hello", {bubbles: true}); // (2)
   elem.dispatchEvent(event);
+
+  // the handler on document will activate and display the message.
+
 </script>
 ```
 
+
 Notes:
 
 1. We should use `addEventListener` for our custom events, because `on<event>` only exists for built-in events, `document.onhello` doesn't work.
@@ -160,11 +164,9 @@ The event class tells something about "what kind of event" it is, and if the eve
 
 We can call `event.preventDefault()` on a script-generated event if `cancelable:true` flag is specified.
 
-Of course, if the event has a non-standard name, then it's not known to the browser, and there's no "default browser action" for it.
+Of course, for custom events, with names unknown for the browser, there are no "default browser actions". But our code may plan its own actions after `dispatchEvent`.
 
-But the event-generating code may plan some actions after `dispatchEvent`.
-
-The call of `event.preventDefault()` is a way for the handler to send a signal that those actions shouldn't be performed.
+The call of `event.preventDefault()` is a way for the handler to send a signal that those actions should be canceled  .
 
 In that case the call to `elem.dispatchEvent(event)` returns `false`. And the event-generating code knows that the processing shouldn't continue.
 
@@ -267,7 +269,7 @@ Now `dispatchEvent` runs asynchronously after the current code execution is fini
 
 ## Summary
 
-To generate an event, we first need to create an event object.
+To generate an event from code, we first need to create an event object.
 
 The generic `Event(name, options)` constructor accepts an arbitrary event name and the `options` object with two properties:
   - `bubbles: true` if the event should bubble.

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

@@ -113,7 +113,7 @@ 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 your device doesn't have it -- then there's another way to do the same.
+ keyboard -- it works. And if their device doesn't have it -- then there should be another way to do the same.
 ```
 
 ## Coordinates: clientX/Y, pageX/Y
@@ -123,7 +123,7 @@ All mouse events have 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. They are similar to `position:fixed`.
+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`.
 
 ````online
 Move the mouse over the input field to see `clientX/clientY` (it's in the `iframe`, so coordinates are relative to that `iframe`):
@@ -138,9 +138,9 @@ Coordinates `pageX`, `pageY` are similar to `position:absolute` on the document
 
 You can read more about coordinates in the chapter <info:coordinates>.
 
-## No selection on mousedown
+## Disabling selection on mousedown
 
-Mouse clicks have a side-effect that may be disturbing. A double click selects the text.
+Mouse clicks have a side-effect that may be disturbing in some interfaces: a double click selects the text.
 
 If we want to handle click events ourselves, then the "extra" selection doesn't look good.
 
@@ -191,7 +191,7 @@ Before...
 
 Now the bold element is not selected on double clicks.
 
-The text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine though.
+The text inside it is still selectable. However, the selection should start not on the text itself, but before or after it. Usually that's fine for users.
 
 ````smart header="Canceling the selection"
 Instead of *preventing* the selection, we can cancel it "post-factum" in the event handler.
@@ -235,9 +235,11 @@ Mouse events have the following properties:
 - Window-relative coordinates: `clientX/clientY`.
 - Document-relative coordinates: `pageX/pageY`.
 
-It's also important to deal with text selection as an unwanted side-effect of clicks.
+It's also important to deal with text selection, it may be an unwanted side-effect of clicks.
 
 There are several ways to do this, for instance:
 1. The CSS-property `user-select:none` (with browser prefixes) completely disables text-selection.
 2. Cancel the selection post-factum using `getSelection().removeAllRanges()`.
 3. Handle `mousedown` and prevent the default action (usually the best).
+
+The selection is a separate topic, covered in another chapter <info:selection-range>.