Svelte 이벤트 연결하기

Svelte 이벤트 핸들러 다루기

DOM 이벤트 연결

Svelte는 다음의 코드와 같이 on: 디렉티브로 요소에 모든 이벤트를 연결할 수 있습니다.

DOM에 이벤트 연결하기
<div on:mousemove={handleMousemove}>
    The mouse position is {m.x} x {m.y}
</div>

Svelte는 on:click, on:mousemove처럼 요소에 이벤트를 연결할 필요가 있을 때, on:eventName의 형태로 속성을 정의해주기만 하면 됩니다.

마우스 움직임을 감지하는 이벤트 예제
<script>
    let m = { x: 0, y: 0 };

    function handleMousemove(event) {
        m.x = event.clientX;
        m.y = event.clientY;
    }
</script>

<div on:mousemove={handleMousemove}>
    The mouse position is {m.x} x {m.y}
</div>

<style>
    div { width: 100%; height: 100%; }
</style>

인라인 핸들러

Svelte는 이벤트 핸들러를 인라인으로 선언할 수도 있습니다.

인라인으로 이벤트 핸들러 선언하기
<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
    The mouse position is {m.x} x {m.y}
</div>

위 코드에서 따옴표" "가 없어도 에러가 발생하지 않지만, 일부 환경에서는 구문 강조 표시에 유용할 수 있습니다.

참고로 일부 프레임워크에서는 내부 루프와 같은 성능상의 이유로 인라인 이벤트 핸들러를 권장하지 않지만, Svelte에서는 인라인 이벤트 핸들러가 성능상의 제약을 발생시키지 않기 때문에 이런 제약에 대한 고민은 필요없다고 하네요.

인라인 이벤트 핸들러 예제
<script>
    let m = { x: 0, y: 0 };
</script>

<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
    The mouse position is {m.x} x {m.y}
</div>

<style>
    div { width: 100%; height: 100%; }
</style>

이벤트 수정자

Svelte의 DOM 이벤트 핸들러는 동작을 변경하는 수정자를 가질 수 있는데, 다음과 같이 once라는 이름의 수정자가 있는 경우에는 이벤트 핸들러가 한 번만 실행됩니다.

이벤트 수정자 사용하기

답글 남기기