This commit is contained in:
Ilya Kantor 2017-06-19 17:21:26 +03:00
parent d67c04c22f
commit b6c7a71d0c
3 changed files with 11 additions and 13 deletions

View file

@ -517,7 +517,7 @@ Here we get a sum of array in one line:
```js run ```js run
let arr = [1, 2, 3, 4, 5] let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((sum, current) => sum + current), 0); let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15 alert(result); // 15
``` ```

View file

@ -388,7 +388,7 @@ For instance:
</script> </script>
``` ```
In other words, when `addEventListener` receives and object as the handler, it calls `object.handleEvent(event)` in case of an event. In other words, when `addEventListener` receives an object as the handler, it calls `object.handleEvent(event)` in case of an event.
We could also use a class for that: We could also use a class for that:
@ -418,9 +418,9 @@ We could also use a class for that:
</script> </script>
``` ```
Here the same object handles both events. Please note that we need to explicitly setup the listeners. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events. Here the same object handles both events. Please note that we need to explicitly setup the events to listen using `addEventListener`. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events.
The method `handleEvent` does not have to handle everything by itself. It can call the corresponding event-specific instead, like this: The method `handleEvent` does not have to do all the job by itself. It can call other event-specific methods instead, like this:
```html run ```html run
<button id="elem">Click me</button> <button id="elem">Click me</button>
@ -456,16 +456,14 @@ There are 3 ways to assign event handlers:
1. HTML attribute: `onclick="..."`. 1. HTML attribute: `onclick="..."`.
2. DOM property: `elem.onclick = function`. 2. DOM property: `elem.onclick = function`.
3. Methods `elem.addEventListener(event, handler[, phase])`, to remove: `removeEventListener`. 3. Methods: `elem.addEventListener(event, handler[, phase])` to add, `removeEventListener` to remove.
HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there. HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there.
DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing. DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing.
The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transtionend` and `DOMContentLoaded` (to be covered). The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transtionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event.
Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened.
When a handler is called, it gets an event object as the first argument that contains the details about what's happened.
We'll learn more about events in general and about different types of events in the next chapters. We'll learn more about events in general and about different types of events in the next chapters.

View file

@ -39,20 +39,20 @@ That can be described as "greediness is the cause of all evil".
To find a match, the regular expression engine uses the following algorithm: To find a match, the regular expression engine uses the following algorithm:
- For every position in the string - For every position in the string
- Match the pattern symbol-by-symbol using classes and quantifiers. - Match the pattern at that position.
- If there's no match, go to the next position. - If there's no match, go to the next position.
These common words do not make it obvious why the regexp fails, so let's elaborate how the search works for the pattern `pattern:".+"`. These common words do not make it obvious why the regexp fails, so let's elaborate how the search works for the pattern `pattern:".+"`.
1. The first pattern character is a quote `pattern:"`. 1. The first pattern character is a quote `pattern:"`.
The regular expression engine tries to find it on 0-th position of the source string, but there's `subject:a` there, so no match. The regular expression engine tries to find it at the zero position of the source string `subject:a "witch" and her "broom" is one`, but there's `subject:a` there, so there's immediately no match.
Then it advances: goes to the 1st, 2nd positions in the source string and tries to find the pattern there, and finally finds the quote at the 3rd position: Then it advances: goes to the next positions in the source string and tries to find the first character of the pattern there, and finally finds the quote at the 3rd position:
![](witch_greedy1.png) ![](witch_greedy1.png)
2. The quote is detected, and then the engine tries to find a match for the rest of the pattern. 2. The quote is detected, and then the engine tries to find a match for the rest of the pattern. It tries to see if the rest of the subject string conforms to `pattern:.+"`.
In our case the next pattern character is `pattern:.` (a dot). It denotes "any character except a newline", so the next string letter `match:'w'` fits: In our case the next pattern character is `pattern:.` (a dot). It denotes "any character except a newline", so the next string letter `match:'w'` fits: