Skip to content

Commit cb5dcf2

Browse files
authored
docs: multiple event listeners on single node
It documents sveltejs#2709
1 parent 7ebf347 commit cb5dcf2

File tree

1 file changed

+18
-1
lines changed

1 file changed

+18
-1
lines changed

site/content/docs/02-template-syntax.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,23 @@ Components can emit events using [createEventDispatcher](docs#createEventDispatc
366366
<SomeComponent on:whatever={handler}/>
367367
```
368368

369+
It's also possible to have two different listeners that react on the same event:
370+
371+
```html
372+
<script>
373+
let counter;
374+
function increment() {
375+
counter = counter + 1;
376+
}
377+
378+
function track(event) {
379+
trackEvent(event)
380+
}
381+
</script>
382+
383+
<button on:click="{increment}" on:click="{track}">Click me!</button>
384+
```html
385+
369386
---
370387

371388
As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
@@ -1307,4 +1324,4 @@ It accepts a comma-separated list of variable names (not arbitrary expressions).
13071324
{@debug typeof user === 'object'}
13081325
```
13091326

1310-
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
1327+
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.

0 commit comments

Comments
 (0)