From 0c6a4acd94e54f34e078de8856c06b96063c4d30 Mon Sep 17 00:00:00 2001 From: Dave Mackey Date: Tue, 6 Sep 2022 10:33:05 -0400 Subject: [PATCH] Update article.md Minor grammar changes, clarify that if using a class for `handleEvent` we still are actually using an object as we have to instantiate the class. --- .../2-events/01-introduction-browser-events/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 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 f75f6c11..444f49d6 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -261,7 +261,7 @@ input.removeEventListener("click", handler); Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`. ```` -Multiple calls to `addEventListener` allow to add multiple handlers, like this: +Multiple calls to `addEventListener` allow it to add multiple handlers, like this: ```html run no-beautify @@ -288,7 +288,7 @@ As we can see in the example above, we can set handlers *both* using a DOM-prope ````warn header="For some events, handlers only work with `addEventListener`" There exist events that can't be assigned via a DOM-property. Only with `addEventListener`. -For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and DOM is built. +For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and the DOM has been built. ```js // will never run @@ -334,10 +334,10 @@ Some properties of `event` object: `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 we can get the element from `event.currentTarget`. -`event.clientX / event.clientY` +`event.clientX` / `event.clientY` : Window-relative coordinates of the cursor, for pointer events. -There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when we come to different events in details. +There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when as we move on to the details of different events. ````smart header="The event object is also available in HTML handlers" If we assign a handler in HTML, we can also use the `event` object, like this: @@ -373,7 +373,7 @@ For instance: As we can see, when `addEventListener` receives an object as the handler, it calls `obj.handleEvent(event)` in case of an event. -We could also use a class for that: +We could also use a class (although we still have to instantiate it as an object): ```html run