DOM events

on 지시어를 이용하여 어떤 이벤트라도 수신할수 있다고 설명한다.

<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>

Inline handlers

이벤트 핸들러를 아래 예제와 같이 인라인으로 선언도 가능하다.
따옴표는 선택사항이고, 강조의 의미로 유용하다고 한다.

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

일부 프레임워크는 성능상의 이슈로 인라인 핸들러를 지양하지만,
svelte에서는 컴파일러에서 알아서 최적화 하기때문에 성능상의 이슈로 피하지 않아도 된다고 설명한다.

Event Modifier

DOM 이벤트 변경자를 통해 그들의 행동을 변경할수 있음을 설명한다.
아래 예제는 1번만 실행되도록 once 지시어를 추가해 놓았다.
여러가지를 묵어서 사용도 가능하다. ex) on:click|once|capture={...}

여러가지지 지시어가 있고 설명은 링크를 참조하자.
프론트 기반지식이 없어 어떤 케이스에 적용하면 좋을지 아직 와닫지는 않지만,
나중에 요긴하게 써먹을수 있을것 같은 느낌이다. 일단 정리만..

<script>
function handleClick() {
  alert('clicked')
}
</script>

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

Component events

컴포넌트에서 이벤트를 정의, 발생할수 있고, 그러기 위해서는 event dispatcher를 생성해야 한다.
아래는 Inner 컴포넌트에서 mesage라는 이벤트를 발생시키기 위해, dispatcher를 생성하고 이벤트를 보내는 예제이다.

App.svelte

<script>
import Inner from './Inner.svelte';

function handleMessage(event) {
  alert(event.detail.text);
}
</script>

<Inner on:message={handleMessage}/>

Inner.svelte

<script>
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function sayHello() {
  dispatch('message', {text: 'hello'});
}
</script>

<button on:click={sayHello}>
  Click to say hello
</button>

Event forwarding

DOM 이벤트와 달리, 컴포넌트 이벤트는 버블링되지 않는다고 설명한다.
즉, Inner -> Outer -> App 이런식으로 컴포넌트가 물렸을때,
Inner에서 발생한 이벤트는 Outer까지만 전송된다.
이것을 App까지 올리려면 Outer에도 동일하게 dispatcher를 생성하고 상위로 던지는 로직을 추가해야 한다.

App.svelte

<script>
import Outer from './Outer.svelte';

function handleMessage(event) {
  alert(event.detail.text);
}
</script>

<Outer on:message={handleMessage}/>

Outer.svelte

<script>
import Inner from './Inner.svelte';
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function forward(event) {
  dispatch('message', event.detail)
}
</script>

<Inner on:message={forward}/>

Inner.svelte

<script>
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function sayHello() {
  dispatch('message', {
    text: 'Hello!'
  });
}
</script>

<button on:click={sayHello}>
  Click to say hello
</button>

DOM event forwarding

DOM 이벤트 역시 포워딩이 가능하다.
간단하게 핸들러없이 이벤트만 정의하면 된다.
CustomButton.svelte 파일을 보면, click 이벤트가 정의는 되어 있지만, 핸들러는 정의되어 있지 않다.

App.svelte

<script>
import CustomButton from './CustomButton.svelte';

function handleClick() {
  alert('Button Clicked');
}
</script>

<CustomButton on:click={handleClick}/>

CustomButton.svelte

<button on:click>
  Click me
</button>

<style>
button {
  background: #E2E8F0;
  color: #64748B;
  border: unset;
  border-radius: 6px;
  padding: .75rem 1.5rem;
  cursor: pointer;
}
button:hover {
  background: #CBD5E1;
  color: #475569;
}
button:focus {
  background: #94A3B8;
  color: #F1F5F9;
}
</style>