이벤트 수식어

<script>
	function handleClick(){
		alert('no more alerts');
	}
</script>

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

1. preventDefault: 이벤트 핸들러가 실행되기 전 event.preventDefault()를 호출합니다. 태그의 기본 동작을 막는 이벤트 수식어입니다.

2. stopPropagation: event.stopPropagation()이 호출됩니다. 이벤트가 다음 요소로 흐르는 것을 막는 이벤트 수식어입니다.

3. passive: 터치 혹은 휠 이벤트로 발생하는 스크롤 성능을 향상시키는 이벤트 수식어입니다. Svelte는 안전한 곳(?)에 자동으로 추가합니다.

4. capture: 버블링 단계가 아닌 캡처 단계에서 이벤트 핸들러를 실행합니다.

5. once: 이벤트 핸들러를 단 한 번만 실행하도록 하는 이벤트 수식어입니다.

6. self: event.target과 이벤트 핸들러를 정의한 요소가 같을 때 이벤트 핸들러를 실행하도록 하는 이벤트 수식어입니다.

이벤트 수식어를 on:click|once|capture={...}와 같이 체인(chain)으로 연결해 여러 개를 사용 가능