Skip to content

Commit ca72e2c

Browse files
author
Rich Harris
committed
fix up event modifiers section
1 parent 912166b commit ca72e2c

File tree

3 files changed

+5
-23
lines changed

3 files changed

+5
-23
lines changed

content/tutorial/01-svelte/05-events/03-event-modifiers/README.md

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,7 @@ DOM event handlers can have _modifiers_ that alter their behaviour. For example,
66

77
```svelte
88
/// file: App.svelte
9-
<script>
10-
function handleClick() {
11-
alert(+++'no more alerts'+++)
12-
}
13-
</script>
14-
15-
<button on:click+++|once+++={handleClick}>
9+
<button on:click+++|once+++={() => alert('clicked')}>
1610
Click me
1711
</button>
1812
```
@@ -23,9 +17,9 @@ The full list of modifiers:
2317
- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
2418
- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
2519
- `nonpassive` — explicitly set `passive: false`
26-
- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
20+
- `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture))
2721
- `once` — remove the handler after the first time it runs
2822
- `self` — only trigger handler if event.target is the element itself
29-
- `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
23+
- `trusted` — only trigger handler if `event.isTrusted` is `true`, meaning the event was triggered by a user action rather than because some JavaScript called `element.dispatchEvent(...)`
3024

3125
You can chain modifiers together, e.g. `on:click|once|capture={...}`.
Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
<script>
2-
function handleClick() {
3-
alert('clicked');
4-
}
5-
</script>
6-
7-
<button on:click={handleClick}>
1+
<button on:click={() => alert('clicked')}>
82
Click me
93
</button>
Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
<script>
2-
function handleClick() {
3-
alert('no more alerts');
4-
}
5-
</script>
6-
7-
<button on:click|once={handleClick}>
1+
<button on:click|once={() => alert('clicked')}>
82
Click me
93
</button>

0 commit comments

Comments
 (0)