Vue 이벤트

활용 이벤트

 

이벤트명	설명
click	마우스 클릭 시 실행
dbclick	마우스 더블 클릭 시 실행
mouseover	마우스 포인터가 요소 위에 올라왔을 때 실행
mouseout	마우스 포인터가 요소 밖으로 벗어났을 때 실행
mousemove	마우스 포인터가 이동했을 때 실행
mousedown	마우스 버튼을 눌렀을 때 실행(클릭하는 동안)
mouseup	마우스 버튼을 놓았을 때 실행(클릭 한 후)
keydown	키보드 키를 눌렀을 때 실행(누르는 동안)
keyup	키보드 키를 놓았을 때 실행(누른 후)
change	요소가 변경될 때 실행
submit	Form 이 제출될때 실행
reset	Form이 초기화될 때 실행
select	Select의 값이 선택되었을 때 실행
focus	태그에 포커스 있을 때 실행
blur	태그가 포커스를 일었을 때 실행

 

 

이벤트 수식어

수식어를 이벤트명에 .으로 연결하여 사용

 

수식어	설명	비고
.prevent	기본 이벤트의 자동 실행을 중단 시킴	preventDefault()와 동일한 기능
.stop	이벤트가 전파되는 것을 중단 시킴 (bubbling 중단)	stopPropagation()과 동일한 기능
.capture	포착 단계에서만 이벤트를 발생시킴	내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리함.
.self	발생 단계에서만 이벤트를 발생시킴	event.target이 엘리먼트 자체인 경우에만 트리거를 처리, 자식 엘리먼트에서는 실행 안됨
.once	이벤트를 한번만 실행 시킴
.passive	기본 이벤트를 취소할 수 없게 함.	있을 지 모를 .preventDefault()를 실행 안되게 함.

<!-- 스크롤의 기본 이벤트를 취소할 수 없음 -->
<div @scroll.passive="onScroll">...</div>

 

키 수식어

키 값에 해당하는 수식어를 별도의 이름으로 지정하여 사용

<!-- keycode가 13일 때만 'vm.submit()'을 호출함 -->
<input @keyup.13="submit">

<!-- keycode가 13대신 .enter로 지정하여 활용. 위의 코드와 동일하게 작동 -->
<input @keyup.enter="submit">

1개 키 사용법  <input @keyup.tab="...">  여러개 키 사용법  <input @keyup.shift.13="...">

키 수식어 명	고유 키 값	비고
.enter	13
.tab	9
.delete	8	"Delete"와 "Backspace" 키 모두 해당
.esc	27
.space	32
.up	33
.down	34
.left	37	* 마우스 왼쪽 버튼 클릭도 .left 사용
.right	39	* 마우스 오른쪽 버튼 클릭도 .right 사용
.ctrl	17
.alt	18
.shift	16
.meta		매킨토시에서 cmd 키, window에서는 windows 키

* .middle - 마우스 가운데 휠 버튼 클릭