[SVELTE] on:eventname

on:eventname

on:eventname={handler}
on:eventname|modifiers={handler}

스벨트에서는 on: 키워드를 컴포넌트에 입력하는 것으로 해당 컴포넌트에서 발생하는 DOMevent를 연결 할 수 있습니다.

<script>
    let count = 0;

    function handleClick(event) {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    count: {count}
</button>

이벤트 핸들러는 성능의 영향을 주지않고 인라인으로 선언 할 수 있습니다. ' 따옴표와 함께 사용하는 경우, 스벨트 문법은 하이라이팅 되며, 정상 작동 합니다.

<button on:click="{() => count += 1}">
    count: {count}
</button>

preventDefault 같은 모디파이어를 사용하는 경우 | 문자와 함께 사용 할 수 있습니다.

<form on:submit|preventDefault={handleSubmit}>
    <!-- the `submit` event's default is prevented,
         so the page won't reload -->
</form>

사용 할 수 있는 modifier의 종류는 다음과 같습니다.

• preventDefault - 이벤트 핸들러가 실행 되기전에 event.preventDefault()가 실행됩니다.
• stopPropagation - 다음 엘리먼트로 이벤트가 전파되는 것을 막습니다. preventDefault와 동일하게 event.stopPropagation을 호출합니다.
• passive - 스크롤 혹은 휠 이벤트의 성능을 올려줍니다. 스벨트는 기본적으로 이 모디파이어를 실행 합니다.
• nonpassive - passive 옵션을 false로 할당 합니다.
• capture - 버블링 대신에 캡쳐링을 실행합니다.
• once - 한번 이벤트가 발생하면 이벤트 핸들러를 삭제합니다.
• self - event.target과 엘리먼트가 일치하는 경우 실행 합니다.

eventModifier를 체인 형식으로 작성 할 수 있습니다.
on:click|once|capture={...}

만약 이벤트의 이름과 연결할 함수의 이름이 같다면, ={}을 생략 할 수도 있습니다.

<button on:click>
    The component itself will emit the click event
</button>

또한 이벤트를 여럿 작성하여, 한 이벤트가 발생했을 때 다른 이벤트를 같이 실행 할 수도 있습니다.

<script>
    let counter = 0;
    function increment() {
        counter = counter + 1;
    }

    function track(event) {
        trackEvent(event)
    }
</script>

<button on:click={increment} on:click={track}>Click me!</button>

#svelte #event