Events

Event handlers are attached with on<event> attributes, like onclick and onkeydown:

export default function Component() {
	function handleClick() {
		console.log("Clicked!");
	}

	@render {
		<button onclick={handleClick}>Click me</button>
	}
}

The event object

Handlers receive the native event object as their first argument, and this is set to the element that raised the event:

export default function Component() {
	function handleKeyDown(e: KeyboardEvent) {
		if (e.key === "Enter") {
			console.log((e.currentTarget as HTMLInputElement).value);
		}
	}

	@render {
		<input onkeydown={handleKeyDown} />
	}
}

Common events like click, input, keydown and change are handled with a single delegated listener per event type. Other events fall back to a standard addEventListener.