이벤트 핸들러는 on: 접두사를 사용하여 정의됩니다. 예를 들어, click 이벤트를 처리하는 핸들러를 정의하려면 다음과 같이 작성합니다:

<script>
  function handleClick() {
    console.log("Clicked!");
  }
</script>

<button on:click={handleClick}>Click me</button>

이 예제에서는 handleClick 함수를 정의하고, on:click 속성을 사용하여 버튼 요소에서 발생하는 클릭 이벤트와 핸들러를 바인딩합니다. 클릭이 발생하면 콘솔에 “Clicked!”라는 메시지가 출력됩니다.

또한, Svelte에서는 이벤트 객체를 사용하여 이벤트 발생 시 추가 정보를 전달할 수 있습니다. 예를 들어, 클릭한 버튼의 정보를 출력하는 예제를 살펴보겠습니다:

<script>
  function handleClick(event) {
    console.log("Clicked button:", event.target);
  }
</script>

<button on:click={handleClick}>Click me</button>

이 예제에서는 handleClick 함수에 event 매개변수를 추가하여 이벤트 객체를 받습니다. event.target을 통해 클릭한 버튼의 정보를 알 수 있습니다.

Svelte에서 이벤트 처리는 매우 직관적이고 간편합니다. 이를 활용하여 원하는 방식으로 컴포넌트와 상호작용할 수 있습니다. Svelte 공식 문서에서 다양한 이벤트 처리에 대한 자세한 내용을 확인할 수 있습니다. [^1^]