Events / DOM events • Svelte Tutorial

Basic Svelte Events DOM events

今までざっと見てきたように、要素の任意の DOM イベント (例えば click や pointermove) をリスンするには、on<name> 関数を使用します:

App

<div onpointermove={onpointermove}>
	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
</div>

他のプロパティと同様に、名前と値が一致する場合は短縮形を使用することができます:

App

<div {onpointermove}>
	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
</div>

previous next

<script>

	let m = $state({ x: 0, y: 0 });

	function onpointermove(event) {

		m.x = event.clientX;

		m.y = event.clientY;

</script>

<div>

	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}

</div>

<style>

	div {

		position: fixed;

		left: 0;

		top: 0;

		width: 100%;

		height: 100%;

		padding: 1rem;

</style>

show text show editor