jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #3176 from davidshq/patch-3

Browse source 
Update article.md
This commit is contained in:
Ilya Kantor 2022-09-20 13:55:16 +02:00 • committed by GitHub
commit 83b7de0b79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
2-ui/2-events/01-introduction-browser-events/article.md
View file

@ -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`. 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 ```html run no-beautify
<input id="elem" type="button" value="Click me"/> <input id="elem" type="button" value="Click me"/>
@ -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`" ````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`. 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 ```js
// will never run // will never run
@ -334,10 +334,10 @@ Some properties of `event` object:
`event.currentTarget` `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`. : 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. : 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" ````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: 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. 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 ```html run