Svelte - Events

📌 목록

• Introduction
• DOM events
• DOM modifiers
• Component Event
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 svetle의 events에 대해서 알아보겠습니다.

📌 DOM events

이전에 한번 다뤘듯이 :on으로 event를 listen 할수 있습니다.

<script>
  const onClick = () => {
    console.log('HELLO');
  };
</script>

<button on:click={onClick}>HELLO</button>

또한 inline으로도 할수 있어요.

<button on:click={() => { console.log('HELLO') }}>HELLO</button>

📌 DOM modifiers

event modifiers의 기본적인 사용방법은 다음과 같아요.

<button on:click|once={() => { console.log('HELLO') }}>HELLO</button>

총 7가지 modifiers가 존재합니다.

1. preventDefault

-> handler를 호출하기 전에 event.preventDefault()가 돌아갑니다.

2. stopPropagation

-> handler를 호출하기 전에 event.stopPropagation()가 돌아갑니다.

3. passive

-> 터치나 wheel 이벤트의 퍼포먼스를 향상 시킵니다.

4. nonpassive

-> passive를 false로 세팅 합니다.

5. capture

-> 이벤트 캡쳐를 시켜줍니다.

6. once

-> 딱 한번만 이벤트를 호출 시킵니다.

7.self

-> 엘리먼트의 이벤트만 잡게 됩니다.

이 모든 modifiers는 chain으로 가능합니다.

📌 Component Event

컴포넌트에서 부모에게 이벤트를 전달해줄수 있습니다. Vue에서의 emit과 비슷해요.

<script>
  // MyButton.svelte
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  const onClick = () => {
    dispatch('click');
  };
</script>

<style>
  .my-btn {
    color: red;
  }
</style>

<button class="my-btn" on:click={onClick}>HELLO</button>

<script>
    import MyButton from "./components/MyButton.svelte";

    const onClickMyButton = () => {
        console.log("HELLO");
    };
</script>


<MyButton on:click={onClickMyButton}/>

📌 Conclusion

안녕하세요. 오늘은 이렇게 svelte에서의 event handling에 대해서 알아보았습니다. 되게 vue와 흡사하다는 느낌을 많이 받았던거 같아요. 이제 다음 포스팅에서는 vue와 또 비슷한 bind에 대해서 알아보겠습니다. 그럼 안녕~~🎉

📌 Reference

• svelte tutorial