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]

PreviousbindNextslot

Last updated