You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Important classes to understand the node properties includes - `EventTarget`, `Node`, `Element`, `HTMLElement`-`HTMLBodyElement`-other interface discussed in the [HTML Note](https://karatu.oluwasetemi.dev/85), `Document`-`HTMLDocument`-`DocumentFragment`, `CharacterData`-`Text`-`Comment`.
Attributes are the properties of the elements. They are the key-value pairs of the elements from the [convertion]{.text-xl.font-fast.text-red title='parsed or read'} of HTML to DOM. You can add your own properties to the element but the html attributes set is fixed according to the [specification](https://html.spec.whatwg.org/){.text-gradient}.
The `addEventListener` method allows adding multiple handlers on the same event, with additional configuration options and ability to remove them with `removeEventListener`.
62
60
63
-
```js {monaco-run} {autorun: false}
64
-
elem.addEventListener('click', function () {
65
-
console.log('First handler')
66
-
})
67
-
elem.addEventListener('click', function () {
68
-
console.log('Second handler')
69
-
})
61
+
```html {monaco-run} {autorun: false}
62
+
<buttonid="elem">Click me</button>
63
+
<script>
64
+
elem.addEventListener('click', function () { console.log('First handler') })
65
+
elem.addEventListener('click', function () { console.log('Second handler') })
Event delegation is a technique involving adding a single event listener to a common parent rather than adding them to multiple child nodes. The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor.
242
237
243
-
```html
238
+
```html {monaco-run} {autorun: false}
244
239
<ulid="menu">
245
240
<li>Home</li>
246
241
<li>About</li>
@@ -251,7 +246,7 @@ Event delegation is a technique involving adding a single event listener to a co
251
246
menu.onclick=function (event) {
252
247
let target =event.target
253
248
if (target.tagName!='LI') return
254
-
//console.log(target.innerHTML)
249
+
console.log(target.innerHTML)
255
250
}
256
251
</script>
257
252
```
@@ -349,15 +344,15 @@ To prevent the default action, we can use `event.preventDefault()`. returning `f
`event.isTrusted` - read-only property that returns a boolean value indicating whether or not the event was initiated by the browser (true) or by a script (false).
405
400
406
-
```html
407
-
<buttonid="elem">Click me</button>
408
-
```
401
+
<divgrid="~ cols-2"gap="2">
402
+
<div>
409
403
410
-
<divflex="~">
404
+
## Basic Event
411
405
412
-
```js
413
-
let helloEvent =newEvent('hello', { bubbles:true, cancelable:true })
414
-
elem.addEventListener('hello', function (event) {
415
-
console.log('Hello from '+event.target.tagName)
416
-
})
406
+
```html {monaco-run} {autorun: false}
407
+
<buttonid="elem">Click me</button>
408
+
<script>
409
+
let helloEvent =newEvent('hello', {
410
+
bubbles:true,
411
+
cancelable:true
412
+
})
413
+
elem.addEventListener('hello', function (event) {
414
+
console.log('Hello from '+event.target.tagName)
415
+
})
416
+
// Trigger the custom event when clicked
417
+
elem.addEventListener('click', function() {
418
+
elem.dispatchEvent(helloEvent)
419
+
})
420
+
</script>
417
421
```
418
422
419
-
<Hello />
420
423
</div>
424
+
<div>
421
425
422
-
<v-clicks>
426
+
## CustomEvent with detail
423
427
424
428
For completely new events, we can use `CustomEvent` class. It has an additional `detail` property to pass custom data.
0 commit comments