> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/4./event.md).

# event

이벤트라는 것은 어떤 버튼의 마우스를 클릭, 더블클릭, 혹은 어떤 돔 요소를 마우스로 움직였을 때 이것을 감지하여, 이런 액션이 일어났을 때 실제 함수를 작동시키도록 연동시켜주는 기능이라고 보시면 되겠습니다.

svelte는 `on:<event>` 구문을 사용해서 이벤트를 발생시킵니다.

```
<button on:click={ () => { alert('호출') }}>
click
</button>
```

실제로는 다음처럼 함수를 호출하여 사용하는 경우가 많습니다.

```
<script>
function handleClick() {
	alert('호출')		
}
</script>

<button on:click={handleClick} >클릭</button>
```

또 이벤트 제어에 도움을 주는 수식어(modifiers)라는 것도 있습니다. 가장 이해하기 쉬운 수식어는 once로 이벤트가 단 한번만 실행하도록 하는 기능이 있습니다.

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

<button on:click|once={handleClick}>클릭</button>
```

이 수식어로 사용할 수 있는 것들로는

* `preventDefault`: 이벤트 핸들러가 실행되기 전 `event.preventDefault()`를 호출. 이것은 태그의 기본 동작을 막는 이벤트 수식어입니다.
* `stopPropagation`: `event.stopPropagation()`이 호출. 이벤트가 다음 요소로 흐르는 것을 막는 이벤트 수식어입니다.
* `passive`: 터치 혹은 휠 이벤트로 발생하는 스크롤 성능을 향상시키는 이벤트 수식어입니다.( Svelte는 안전한 곳(?)에 자동으로 추가합니다.)
* `capture`: 버블링 단계가 아닌 캡처 단계에서 이벤트 핸들러를 실행합니다.
* `once`: 이벤트 핸들러를 단 한 번만 실행하도록 하는 이벤트 수식어입니다.
* `self`: `event.target`과 이벤트 핸들러를 정의한 요소가 같을 때 이벤트 핸들러를 실행하도록 하는 이벤트 수식어입니다.

수식어는 `on:click|once|capture={...}` 와 같이 여러개를 함께 사용할 수 도 있습니다.

그리고 태그의 {함수} 로 넘길때 기본적으로 event 정보를 파라미터터로 함수에 넘깁니다. 이때 발생하는 다양한 이벤트 요소는 유용하게 사용됩니다. (예를 들어 마우스 위치정보)

```
<script>
	let m = { x: 0, y: 0 };
	
	const handleMousemove = (event) => {
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

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

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

event 함수를 함수로 호출할경우 파마미터를 함께 넘겨야 할 경우가 자주 발생합니다. 예를 들어 todo 리스트 항목에서 특정 리스트를 삭제해야 할 경우 리스트의 id값등을 함께 함수에 전달해서 필요한 항목을 삭제할 수 있습니다.

그리고 이때는 꼭 `() ⇒ 함수명(파라미터)` 이 형태의 화살표 함수 형태로 만들어 사용해먀만 정상 작동합니다.

```
<script>
function handleDeleteClick(id) {
	...
	deleteFunction(id) // id값을 전달받아 사용
}
</script>

...
<button on:click={() => handleDeleteClick(id)} >삭제</button>
```

예외의 경우는 prop로 받아온 값은 () ⇒ 함수가 아닌 그냥 기본 함수(파람) 형태로 넘길 수 있다. (삭제할지 생강가중)

```
// 기본
<script>
function fnCall() {
...
} 
</script>

<button on:click={fnCall} >Call</button>

// param 이 있는 경우
<script>
function fnCall(param) {
...
} 
</script>

<button on:click={() => fnCall(param)} >Call</button>

// 예외경우
<script>

export let Todo

function fnCall(param) {
...
} 
</script>

<button on:click={fnCall(Todo.id)} >Call</button>
```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&amp;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>