VUE.JS의 EVENT 처리

HTML 문서에서 다이나믹한 UI는 요소에서 발생하는 이벤트 처리를 통해서 구현되는 경우가 많다.

 

예를 들어 키보드를 누를 때 발생하는 `keyup`, `keypress`, `keydown` 이벤트, 마우스를 클릭할 때 발생하는 `click`, `doubleclick` 이벤트, 마우스를 움직일 때 발생하는 `mousemove` 이벤트 등이 있는데, 다음 페이지에서 이런 이벤트 종류에 대해서 참고할 수 있다.

 

• https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조

• https://www.w3schools.com/tags/ref_eventattributes.asp

HTML Event Attributes

 

인라인 이벤트 처리

 

Vue.js에서 이벤트는 v-on 디렉티브를 이용해서 처리할 수 있다. 가장 많이 쓰이는 Click 이벤트를 처리하는 예제는 다음과 같다.

<button id="deposit" v-on:click="balance += parseInt(amount)" class="btn btn-primary>

 

v-on 디렉티브는 다음 예제처럼 'v-on:' 부분을 약어 '@'로 대체해서 사용할 수 있다.

<button id="deposit" @click="balance += parseInt(amount)" class="btn btn-primary>

 

이벤트 핸들러 메서드

위 예제의 경우는 v-on 디렉티브에서 직접 인라인 이벤트 처리를 하는 경우지만, 대개의 경우는 Vue 인스턴스에 등록한 별도의 이벤트 핸들러 메서드를 연결해서 사용한다.

<div id="example">
	<button id="deposit" v-on:click="deposit" class="btn btn-primary">
</div>

<script>
	var vm = new Vue({
    	el: "#example",
        data: {
		x : 0,
		y : 0
        }
    });
    
    methods: {
    	deposit(e) {
        	return x + y;
        }
    }
</script>

 

이벤트 객체

[이벤트 객체의 주요 공통 속성]

속성명	설명
target	이벤트가 발생한 HTML 요소를 리턴함.
currentTarget	이벤트리스너가 이벤트를 발생시키는 HTML 요소를 리턴함.
path	배열값. 이벤트 발생 HTML 요소로부터 document, window 객체로까지 거슬러 올라가는 경로를 나타냄.
bubbles	현재의 이벤트가 버블링을 일으키는 이벤트인지 여부를 리턴함.
cancelable	기본 이벤트를 방지할 수 있는지 여부를 리턴함.
defaultPrevented	기본 이벤트가 방지되었는지 여부를 나타냄.
eventPhase	이벤트 흐름의 단계를 나타냄. 1. 포착 (CAPTURING_PHASE) 2. 이벤트 발생 (AT_TARGET) 3. 버블링 (BUBBLING_PHASE)
srcElement	IE에서 사용되던 속성으로 target과 동일한 속성

 

[키보드 이벤트 관련 속성]

속성명	설명
altKey	ALT 키가 눌러졌는지 여부를 나타냄 (true / false).
shiftKey	SHIFT 키가 눌러졌는지 여부를 나타냄 (true / false).
ctrlKey	CTRL 키가 눌러졌는지 여부를 나타냄 (true / false).
metakey	메타 키가 눌러졌는지 여부를 나타냄. 윈도우에서는 Window Key, macOS에서는 Command Key이다.
key	이벤트에 의해 나타나는 키의 값을 리턴함. 대소문자 구분함.
code	이벤트를 발생시킨 키의 코드 값을 리턴함. ex) a를 눌렀을 때 "KeyA"를 리턴함 ex) Shift를 눌렀을 때 "Shift"를 리턴함.
keyCode	이벤트를 발생시킨 키보드의 고유 키코드 ex) a, A는 65를 리턴함(대소문자 구분하지 않음).
charCode	keypress 이벤트가 발생될 때 Unicode 캐릭터 코드를 리턴함.
location	디바이스에서의 키 위칫값. 일반 키보드는 이 값이 모두 0이므로 이용할 수 없음.

 

[마우스 이벤트 관련 속성]

속성	설명
altkey, shiftKey, ctrlKey, metaKey	키보드 이벤트 관련 속성 참조
button	이벤트를 발생시킨 마우스 버튼 0: 마우스 왼쪽 버튼 1: 마우스 휠 2: 마우스 오른쪽 버튼
buttons	마우스 이벤트가 발생한 후에 눌러져 있는 마우스 버튼의 값을 리턴함. 아래 값의 조합으로 이루어짐. 1: 마우스 왼쪽 버튼 2: 마우스 오른쪽 버튼 4: 마우스 휠 8: 4번째 마우스 버튼 16: 5번째 마우스 버튼 ex) 마우스의 오른쪽 버튼. 휠을 누르고 있는 상태에서 왼쪽 버튼을 클릭할 경우 이 값은 6을 리턴함.
clientX, clientY	마우스 이벤트가 일어났을 때의 뷰포트(ViewPort) 영역상의 좌표, 이 좌표는 스크롤바를 내리더라도 좌푯값에 영향을 받지 않음
layerX, layerY	마우스 이벤트가 발생한 HTML 요소 영역상에서의 좌표(IE이외의 브라우저 사용)
offetX, offsetY	마우스 이벤트가 발생한 HTML 요소 영역상에서의 좌표(IE 브라우저 사용)
pageX, pageY	마우스 이벤트가 일어났을 때의 HTML 문서(Document) 영역상의 좌표
screenX, screenY	마우스 이벤트가 일어났을 때의 모니터 화면(Screen) 영역상의 좌표

 

[이벤트 객체의 주요 메서드]

메서드명	설명
preventDefault()	기본 이벤트의 자동 실행을 중지시킴
stopPropagation()	이벤트의 전파를 막음

 

 

기본 이벤트

브라우저의 기능으로 HTML 문서나 요소에 어떤 기능을 실행하도록 이미 정의되어 있는 이벤트를 기본 이벤트(Default Event)라고 부른다. 대표적인 기본 이벤트는 다음과 같다.

• <a> 요소를 클릭했을 때 href 속성의 경로로 페이지를 이동시킴.
• 브라우저 화면을 마우스 오른쪽 클릭했을 때 내장 컨텍스트 메뉴(ContextMenu: 과거에는 팝업 메뉴라고 불렀지만 공식 명칭은 컨텍스트 메뉴임)가 나타남.
• <form> 요소 내부의 submit 버튼을 클릭했을 때 <form> 요소의 action 속성에 지정된 경로로 method 특성에 지정된 방식으로 전송함.
• <input type="text" ...> 요소에 키보드를 누르면 입력한 문자가 텍스트 박스에 나타남.

이와 같이 평상시 당연하다고 여기는 것 중 의외로 많은 부분이 기본 이벤트로 처리되고 있음을 알 수 있다. Vue.js에서 이벤트 객체의 메서드 중 preventDefault() 는 다음과 같이 함수 내에서 사용한다.

<div id="example" v-on:contextmenu="ctxStop">
	<a href=...
</div>

<script>
	...
    methods: {
    	ctxStop(e) {
        	e.preventDefault();
        }
    }
</script>

또는 다음 예제와 같이 함수내에서 사용하지 않고 v-on 디렉티브의 수식어로 사용할 수 있다.

<div id="example" v-on:contextmenu.prevent>
	.....
</div>

 

이벤트 전파와 버블링

HTML 문서의 이벤트 처리는 3단계를 거친다.

 

1단계는 문서 내의 요소에서 이벤트가 발생했을 때 HTML 문서의 밖에서부터 이벤트를 발생시킨 HTML 요소까지 포착해 들어가는 이벤트 포착 단계(CAPTURING_PHASE)이다.

 

2단계는 이벤트를 발생시킨 요소에 다다르면 요소의 이벤트에 연결된 함수를 직접 호출시키는 이벤트 발생(RAISING_PHASE: AT_TARGET) 단계이다.

 

마지막 3단계로는 이벤트가 발생한 요소로부터 상위 요소로 거슬러 올라가면서 동일한 이벤트를 호출시키는 버블링(BUBBLING_PHASE) 단계이다.

 

일반적으로는 2단계 RAISING, 3단계 BUBBLING_PHASE 에서 연결된 이벤트 함수가 호출된다. 이것을 그림으로 나타내면 아래와 같다.

이벤트 전파의 3단계

위 그림에서#outer 영역과#inner 영역의 요소에 각각 click 이벤트를 연결했을 때,#outer 영역을 클릭했을 때에는 해당 이벤트와 연결된 메소드가 실행되지만,#inner 부분에 해당하는 안쪽 영역을 클릭했을 때에는,#inner 영역의 클릭 시 연결된 이벤트가 발생될 것이라는 일반적인 기대와는 달리,#inner 와#outer 영역에 연결된 각각의 메소드가 모두 실행된다.

 

#inner 를 클릭(2 AT_TARGET)했을 때 상위 요소인 #outer 요소로 이벤트가 전파(3 BUBBLING)되기 때문이다. 이 때 이벤트 전파(Propagation)를 막기 위해서 이벤트 객체의 stopPropagation() 메서드를 호출해서 사용할 수 있다.

<script>
    ...
    methods: {
    	outerClick(e) {
        	...
        	e.stopPropagation();
        }
    }
</script>

stopPropagation() 메소드도 역시 다음 예제와 같이 v-on 디렉티브의 수식어 형태로 사용할 수 있다.

<div id="outer" v-on:click.stop="outerClick">
	<div id="inner" v-on:click.stop="innerClick"></div>
</div>

이벤트 전파와 관련된 이벤트 수식어는 다음과 같다.

• .stop : 이벤트 전파를 중단시킨다.
• .capture : CAPTURING_PHASE 단계에서만 이벤트가 발생한다.
• .self : RAISING_PHASE 단계에서만 이벤트가 발생한다.

이 수식어들은 단독으로도 사용할 수 있지만 다른 수식어와 이어 붙여서 여러 개를 적용할 수도 있다. 만일 기본 이벤트 실행을 막으면서 버블링을 막고 싶다면 다음과 같이 사용할 수 있다.

<div id="example">
	<div id="outer" @click.prevent.capture.stop="outerClick">
    	<div id="inner" @click.stop="innerClick"></div>
    </div>
</div>

 

이벤트 수식어

앞에서 살펴본 .prevent, .stop, .self 와 같은 이벤트 수식어(Event Modifiers) 외에도 다양한 이벤트 수식어가 있다.

 

once 수식어 : once 수식어는 한 번만 이벤트를 발생시킨다. 처음 한 번만 이벤트를 실행시키고 두 번째부터 이벤트를 발생시키지 말아야 하는 경우 별도의 프로그래밍이 필요 없이 once  수식어를 사용하면 된다.

 

 

키코드 수식어

 

아래 예제와 같은 형식으로 사용할 수 있는데, 아래 예제에서 13은 enter 키를 가리키는 고유의 keycode 이다.

<input type="text" v-model="name" v-on:keyup.13="search">

키보드의 고유 키코드 값은 기억하기 어렵다. 이러한 이유로 Vue.js 에서는 키코드 수식어의 별칭을 제공한다.

.enter	.tab	.delete	.esc
.space	.up	.down	.left
.right	.ctrl	.alt	.shift
.meta

위 예제에 별칭을 적용한다면 아래 예제처럼 바꾸어 사용할 수 있다.

<input type="text" v-model="name" v-on:keyup.enter="search">

또한 예를 들어 CTRL + C (복사할 때 자주 사용하는 단축키)를 구현하려면 v-on:keyup.ctrl.67="copy"로 지정하면 된다.

 

 

마우스 버튼 수식어

마우스 버튼도 수식어가 제공된다.

.left

.right

.middle

마우스 왼쪽 클릭 이벤트가 발생했을 때 'leftMouse' 라는 메서드를 실행하려면, 아래 예제와 같이 사용할 수 있다.

<div id="example" @mouse.left="leftMouse">
	...
</div>