Vue.js 공부 기록(4) - 이벤트 핸들링, 메서드 이벤트 핸들러, v-on 기본 예제

🔍Vue.js 이벤트 핸들링

• 기존 Javascript의 'addEventListener' 메서드, jQuery의 '.on' 메서드와 같이 이벤트를 연결하여 사용하는 기능
• 'v-on' 디렉티브, '@' 2가지를 사용해서 이벤트 핸들링 처리함.

🔍메서드 이벤트 핸들러 

• 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하여 처리

click 이벤트 핸들링의 기본적인 예제를 해보기 전에 기존에 자바스크립트에서 사용했던 onclick 이벤트를 적용시켜보면

버튼을 누르면 설정해둔 alert창이 잘 뜬다.

v-on:을 붙여서 이벤트 핸들러를 적용시켜도

 

동일하게 잘 뜬다.

이번에는 함수를 통해 처리해보았다.

더하기 버튼, 빼기 버튼이 잘 동작한다.

submit에도 적용시킬 수가 있다.

입력 후 버튼을 누르면 alert창이 잘 동작한다.

🔍이벤트 수식어

이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이며 메소드 내에서 쉽게 이 작업을 할 수 있지만 DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있도록 이벤트 수식어를 제공함.

 

 

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

🔍키 수식어

키보드 이벤트 청취 시 종종 공통 키 코드를 확인해야함. Vue는 키 이벤트 수식 시 v-on에 대한 키 수식어를 추가할 수 있음.

 

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