Overriding mouse events (e.g. onclick)

[jimafisk]

HTML elements have event attributes like "onclick" that allow you to run a script in JS when an element is clicked. Commonly used events are mouse events, focus events, keyboard events, touch events, and others like drag and media events.

Svelte uses its own directives like on:click instead of the existing onclick attribute for valid reasons the Rich explains:

The onclick attribute is an existing HTML attribute (that you shouldn't use). The semantics are very different — the string value is evaluated as JavaScript when the click happens. It's a bad practice because any functions you call must live in the global scope.
on:click is a Sveltism that links the button's click event to a locally defined function. The : is a generic piece of syntax that says 'this is a directive rather than an attribute' — where 'directive' can mean an event handler (on:...), a binding (bind:...), a transition (in:.../out:.../transition:...) and so on.

Not sure if we'd want to highjack the existing attributes and change their functionality to scope them to a local function or define an explicit directive like this, but wanted to add this issue as a placeholder to circle back on.