[Svelte강좌] 5강 Svelte Event - 오쌤의 니가스터디

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Svelte 이벤트 문법

---

- 이벤트(event)는 자바스크립트가 명령을 주는 시점을 말합니다. 

- 보통 마우스를 클릭했을 때, 키보드를 눌렀을 때, 스크롤바를 움직일 때와 같이 ~했을 때가 이벤트입니다.

 

 

 

 

1) 이벤트 문법

## Svelte 이벤트 기본 사용방법

on:이벤트명 = { 이벤트함수 }

- 처음 강좌부터 사실 클릭이벤트를 사용해 봤습니다. 이번 강좌에서는 이벤트를 디테일하게 배워보도록 하겠습니다.

 

 

 

 

 

 

 

2) 이벤트의 종류

- Svelte 확장 플러그인을 통해 [ on: ]만 작성해도 사용 가능한 이벤트가 쫙~ 뜹니다.

- 이벤트가 엄청 많은 것이 확인됩니다. 하지만 저것은 모두 자바스크립트 관련 이벤트가 대부분이기 때문에 그쪽에서 공부가 잘 되어 있다면  어렵지 않습니다. 그래도 꼭 기억하면 좋을 이벤트를 정리하고 가겠습니다. 

 

 

 

 

## 꼭 기억해야 할 이벤트 종류

이벤트명	설명
click	요소에서 마우스를 클릭했을 때
mouseenter	요소에 마우스가 들어갔을 때
mouseleave	요소에서 마우스가 떠났을 때
mousemove	요소에서 마우스를 움직일 때
keydown	키보드를 눌렀을 때(특수키 인식)
keyup	눌렀던 키에서 뗄 때
keypress	키보드를 눌렀을 때(특수키 미인식)
scroll	페이지 스크롤바의 이동이 발생되었을 때
resize	브라우저 창 크기가 변경되었을 때

- 이외에도 많은 이벤트가 있지만, 최소 위의 이벤트들을 꼭 외워 주세요.

- 기본적으로 JS을 공부하셨다면, 다 숙지하고 있을 이벤트입니다.

 

 

 

 

 

 

 

3) DOM 이벤트 사용

## 코드 예시

- 요소에서 마우스를 움직였을 때 마우스 좌표 구하기

<script>
	let m = { x: 0, y: 0 };

	function handleMousemove(event){
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

<div on:mousemove={handleMousemove}>
	x좌표 : { m.x } <br>
	y좌표 : { m.y }
</div>

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

- m이라는 변수에 객체 선언 방식으로 속성에 각각 값을 0으로 초기 상태 값을 담습니다.

- 함수에 마우스 이벤트 객체인 [ event ]를 매개변수로 작성해줍니다.

- 각각의 x좌표, y좌표 값을 [ m.x ]와 [ m.y ]에 담아줍니다. 

- 그리고 div태그에  mousemove 이벤트를 실행해주면 div태그에서 마우스를 움직일 때 좌표값을 처리해줍니다.

- 스타일에서 div태그가 body영역을 전부 상속받게 처리해줍니다. 

 

 

## 결과 보기

- 마우스를 움직이면 좌표값이 상태 값으로 실시간으로 잘 바뀌는 것이 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

4) inline 이벤트 사용

- 이벤트를 제어할 경우 보통 함수를 만들어 이벤트와 연동하는 것이 보통입니다.

- 하지만 간단한 작업은 화살표 함수를 사용해서 마크업 영역에 인라인 형태로 사용할 수 있습니다. 

- 위에서 마우스 움직이던 코드를 inline형태로 사용해보겠습니다.

 

 

## 코드 보기

<script>
	let m = { x: 0, y: 0 };
</script>

<div on:mousemove={e => m = { x: e.clientX, y: e.clientY }}>
	x좌표 : { m.x } <br>
	y좌표 : { m.y }
</div>

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

-  <script> 태그 내부에 넣었던 함수를 화살표 함수로 교체했습니다.

 

 

 

## 결과 보기

 

 

 

 

 

 

 

 

5) 함수 매개변수 사용

- 함수 매개변수를 이벤트로 전달할 경우 꼭 화살표 함수를 사용해야 합니다.

 

## 문법

//매개변수가 없을 경우
on:click={함수명}

//매개변수가 있을 경우
on:click={() => 함수명(매개변수)}

 

 

## 코드 보기

<script>
	function handleClick01(text){
		alert(`${ text } 클릭!`);
	};

	function handleClick02(text){
		alert(`${ text } 클릭!`);
	};
</script>

<button on:click={() => handleClick01('1번')}>첫번째 버튼</button>
<button on:click={() => handleClick02('2번')}>두번째 버튼</button>

- 함수에 매개변수 text를 사용했습니다. 

- 매개변수를 alert() 함수에서 문자열로 받아올 때 따옴표가 아닌 [ ` ](Grave accent-역 엑센트)를 사용해줍니다. 

- 매개변수를 이벤트로 가져올 때 화살표 함수를 꼭 사용해야 합니다. 

<button on:click={() => handleClick01('1번')}>첫번째 버튼</button> //맞음

<button on:click={handleClick01('1번')}>첫번째 버튼</button> //틀림

 

 

 

## 결과 보기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Event Modifiers(이벤트 수식어)

---

- Svelte는 이벤트를 제어할 때 조건을 붙이는 수식어도 함께 사용할 수 있습니다. 

- 대표적으로  once 가 있는데, 단어 뜻 그대로 이벤트가 한 번만 발생하도록 합니다.

 

 

## 문법

on:이벤트명|수식어={ }

- 이벤트명 뒤에 [ | ](파이프문자)를 통해 수식어를 붙일 수 있습니다. 

 

 

 

 

 

 

1) Event Modifiers의 종류

수식어	설명
preventDefault	'e.preventDefault()' 를 호출. 이벤트가 발생한 태그의 기본 이벤트를 막음.
stopPropagation	'e.stopPropagation()' 을 호출. 발생한 이벤트가 겹쳐진 상위 요소로 전달되지 않게 막음.
passive	터치 혹은 휠 이벤트로 발생하는 스크롤 성능을 향상시킴.
capture	버블링 단계가 아닌 캡처 단계에서 이벤트 핸들러를 실행함.
once	이벤트 핸들러를 단 한번만 실행하도록 함.
self	'e.target'과 이벤트 핸들러를 정의한 요소가 같은 때 이벤트 핸들러를 실행하도록 함.

 

 

 

 

 

 

 

 

 

2) once 수식어 사용

- 위에서도 설명했다시피, once는 이벤트를 한 번만 발생시키는 수식어입니다. 

 

## 코드 보기

<script>
	function handleClick(){
		alert('클릭은 한번만 제공합니다.');
	};
</script>

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

- 이벤트 타입명 옆에  once 를 붙여 클릭 이벤트를 한 번만 실행하도록 처리합니다. 

 

 

## 결과 보기

- 버튼 한 개당 한 번의 경고창만 반환하는 것을 확인할 수 있습니다.