Vue.js - 이벤트 핸들링

 

 

 

Vue.js의 '꽃'인 이벤트 핸들링의 대해서 알아보려고 한다.

기존의 Javascript의 'addEventListener' 메서드나 Jquery에서 사용하는 '.on' 메서드 같이 이벤트를 연결하여 사용하는 기능을 DOM Element의 속성안에서 사용할 수 있다.

 

Vue.js의 이벤트 핸들링은 첫 문자가 'v-on' 디렉티브나 '@' 2가지만 사용해서 이벤트 핸들링을 한다.

딱 2가지만 기억하면 쉽게 핸들링을 할 수 있으니 기억하자!

 

 

메서드 이벤트 핸들링

 

메서드 이벤트 핸들링(Method Event Handling)은 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하면 된다.

 

/* testClick이라는 Function을 실행하는 방법. 둘다 동작은 같다. */  <button v-on:click="testClick">클릭</button> <button @click="testClick">클릭</button> 

 

위 예제는 click 이벤트 핸들링의 기본적인 예제이다. 'v-on'과 '@'를 시작으로 다음 Javscript에서 지원하는 '이벤트 명'(예: change, click, blur 등...)을 쓰면 된다.

 

 

인라인 메서드 핸들링

 

인라인 메서드 핸들링은 디렉티브 값에 자바스크립트 식을 직접 작성을 하여 핸들링을 하는 처리 방식이다.

핸들러를 너무 길게 작성하면 Template이 보기 힘들어지므로, 재사용을 거의 하지 않는 짧은 식으로만 사용하는 것을 권장한다.

 

/* 버튼을 클릭하여 count라는 변수에 값을 변경 */ <button @click="count++">클릭</button>  /* 버튼을 클릭하여 testClick Function을 이벤트 객체와 item 매개 변수로 호출 */ <button @click="testClick($event, item)">클릭</button> 

 

인라인 메서드 핸들러 식에서는 이벤트 객체 또는 사용자 정의 이벤트 매개변수를 '$event'라는 변수 이름으로 사용 할 수도 있다.

'$event'는 원본 DOM 이벤트에 액세스가 가능한 특별한 변수다.

(기본적으로 Javascript에 사용하는 event 객체라고 생각하면 되겠다.)

 

 

이벤트 장식자

 

• .stop : event.stopPropagation() 호출하여 이벤트 버블링을 막습니다.
• .prevent : event.preventDefault() 호출하여 링크 이동이나 submit 같은 기본처리를 방지.
• .capture : 캡처 모드로 DOM 이벤트 핸들하여 버블링 이벤트보다 먼저 쓰여짐.
• .self : 이벤트가 해당 요소에서 직접 발생할 때만 핸들러를 호출하며 자기 자신일 때만 호출하는 경우가 많음. 예를들어 모달 창의 close를 할 때 많이 사용.
• .once : 한 번만 핸들
• .passive : {passive: true}로 DOM 이벤트를 호출하며 'event.preventDefault()를 사용하지 않겠다고 명시함. 모바일 환경에서 비용이 높은 처리를 할 때 화면 움직임이 부드럽지 않을 때 사용하면 좋음.
• .native : 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트를 호출. 컴포넌트에서 이벤트를 직접 호출하고 싶은 경우에 사용함.

 

/* .native의 사용 예제 */  // 컴포넌트에서 직접 사용이 불가함. <my-component @click="testClick"></my-component> // .native를 사용하여 컴포넌트에서 이벤트 핸들링이 가능하게 함. <my-component @click.native="testClick"></my-component> 

 

키 장식자

 

• .enter : Enter키를 눌렀을 때
• .tab : Tab 키를 눌렀을 때
• .delete : Delete와 Backspace 키 모두를 캡처함.
• .esc : ESC 키를 눌렀을 때
• .space : Space 키를 눌렀을 때
• .up : 화살표 위 키를 눌렀을 때
• .down : 화살표 아래 키를 눌렀을 때
• .left : 화살표 왼쪽 키를 눌렀을 때
• .right : 화살표 오른쪽 키를 눌렀을 때

 

 

마우스 장식자

 

• .left : 마우스 왼쪽 버튼으로 눌렀을 때만 핸들러를 호출
• .right : 마우스 오른쪽 버튼으로 눌렀을 때만 핸들러를 호출
• .middle : 마우스 중간 버튼을 눌렀을 때만 핸들러 호출(스크롤 버튼)

 

 

시스템 장식자

 

• .ctrl : Ctrl 키를 눌렀을 때.
• .alt : Alt 키를 눌렀을 때.
• .shift : Shift 키를 눌렀을 때.
• .meta : 매킨토시 키보드에서 meta는 command 키 (⌘). Windows에서는 windows 키(⊞).

 

이벤트 핸들링에 따라 코드가 꽤 많이 줄어들면서 불필요한 자바스크립트를 사용하지 않을 것 같다.

상황에 따라, 기능에 따라 조합만 잘 하게 된다면 아주 편할 것 같다.

 

 

 

 

 

 

 

 

 

참조 : 고양이도 따라할 수 있는 Vue.js

참조 : https://kr.vuejs.org/v2/guide/events.html