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

@ -388,7 +388,7 @@ For instance:
</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:
@ -418,9 +418,9 @@ We could also use a class for that:
</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
<button id="elem">Click me</button>
@ -456,16 +456,14 @@ There are 3 ways to assign event handlers:
1. HTML attribute: `onclick="..."`.
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.
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.
When a handler is called, it gets an event object as the first argument that contains the details about what's happened.
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.
We'll learn more about events in general and about different types of events in the next chapters.