Clarifying passing params to event handler

In Svelte 3, event handler calls work differently than in v2. It's important to detail the difference and provide explanation of how it works.
pull/2544/head
Laszlo Szenes 7 years ago committed by GitHub
parent 6c0aa3b9ef
commit 3cb942c590
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -8,4 +8,20 @@ As we've briefly seen already, you can listen to any event on an element with th
<div on:mousemove={handleMousemove}>
The mouse position is {m.x} x {m.y}
</div>
```
```
> The `on:` directive expects a function reference in the curly braces. *Not a function call as it was in version 2*.
> When the event is triggered the function will be called with the `event` object as the first parameter.
> So if you need to pass a value with the event then you need to make a function that returns a function with your parameter enclosed. Here is an example:
```html
<script>
let sum=0
function add(val){
return function(){ sum+=val }
}
//Or you can use the arrow functions :
//const add= val => () => sum+=val
</script>
...
<button on:click={add(2)}>Add 2 to the sum</button>
```

Loading…
Cancel
Save