From b6b06f6b3555efca0e1ccd8201c6e7a26c84b412 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Thu, 1 Aug 2019 18:39:59 +0300 Subject: [PATCH] minor --- .../01-introduction-browser-events/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index ee69e9df..26025451 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -162,15 +162,15 @@ button.onclick = sayThanks(); If we add parentheses, `sayThanks()` -- is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work. -...But in the markup we do need the parentheses: +...On the other hand, in the markup we do need the parentheses: ```html ``` -The difference is easy to explain. When the browser reads the attribute, it creates a handler function with the body from its content. +The difference is easy to explain. When the browser reads the attribute, it creates a handler function with *body from its content*: `sayThanks()`. -So the last example is the same as: +So the markup generates this property: ```js button.onclick = function() { *!* @@ -351,7 +351,7 @@ Some properties of `event` object: : Event type, here it's `"click"`. `event.currentTarget` -: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then `event.currentTarget` becomes useful. +: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then we can get the element from `event.currentTarget`. `event.clientX / event.clientY` : Window-relative coordinates of the cursor, for mouse events. @@ -371,7 +371,7 @@ That's possible because when the browser reads the attribute, it creates a handl ## Object handlers: handleEvent -We can assign an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called with it. +We can assign not just a function, but an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called. For instance: @@ -388,7 +388,7 @@ For instance: ``` -In other words, when `addEventListener` receives an object as the handler, it calls `object.handleEvent(event)` in case of an event. +As we can see, 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: