#svelte5
From: Svelte 5 docs: `Basic Svelte / Events / DOM events`
October 23 @ 04:58
---
We are able to listen in on any DOM events on elements using the `on<...>` function
**NOTE:** on any property where the name matches the value, we can use the short form like shown below
```svelte
<div onpointermove={onpointermove}>
The pointer is at . . .
</div>
```
Becomes ⟶
```svelte
<script>
let m = $state({ x: 0, y: 0});
function onpointermove(event) {
m.x = event.clientx;
m.y = event.clienty;
}
</script>
<div {onpointermove}>
The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
</div>
```
# Inline Handlers
Rather than declaring the `function onpointermove(event)` function, we can declare **Inline Handlers** like so:
```svelte
<script>
let m = { x: 0, y: 0 };
</script>
<div
onpointermove={(e) => {
m.x = event.clientx;
m.y = event.clienty;
}}
>
The pointer is at {m.x} x {m.y}
</div>
```
In Javascript there are what's known as the **bubbling** phase and (with Svelte) the **capture** phase. When we embed event handlers inside markup elements, like a `<button>` inside of a `<div>`