[Vue] Vue시작(5) - 이벤트 처리, 이벤트 객체 속성

인라인 이벤트 처리

Vue.js에서 이벤트는 v-on 디렉티브를 이용해서 처리할 수있다.
v-on:click v-on:input을 줄여서 @click @input 처럼 사용할 수 있다.
React에서는 input에 onChange라는 이벤트속성을 사용했지만, Vue에서는 input이라는 이벤트 속성을 사용하며, change는 없다.

이벤트 객체 속성

• target: 이벤트가 발생한 HTML 요소를 리턴함.
• currentTargt: 이벤트리스너가 이벤트를 발생시키는 HTML요소를 리턴함.

target과 currentTarget의 차이점은 이벤트버블링과 관련있다.

<div onclick="console.log("clicked")">
  <span> click me </span>
 </div>

span태그를 클릭했다면
클릭된 대상인 span태그는 event.target
이벤트가 바인딩된 대상은 event.currentTarget이 된다.

• path: 배열값, 이벤트 발생요소로부터 document, window객체로 거슬러 올라가는 경로
• bubbles: 현재의 이벤트가 버블링을 일으키는지 여부
• cancelable: 기본 이벤트를 방지 할 수 있는지 e.preventDefault() 사용 가능 여부
• default-Prevented: 기본 이벤트가 방지됐는지 여부
• eventPhase: 이벤트 흐름의 3단계를 표시
• srcElement: IE에서 사용되던 속성으로 target과 동일한 속성

키보드 이벤트 관련

• altKey: alt키가 눌렸는지 여부
• shiftKey
• ctrlKey
• metakey: meta키가 눌렸는지 여부, 윈도우에서는 window, mac에서는 command
• key: 이벤트에 의해서 나타나는 키의 값, 대소문자 구분
• code: 키 코드
• keyCode
• charCode: Unicode 캐릭터코드를 리턴

마우스 이벤트 관련

• altkey, shiftKey, ctrlKey, metaKey 동일
• button: 이벤트 발생시킨 마우스 버튼 (왼: 0, 휠: 1, 우: 2)
• buttons: 이벤트가 발생한 후에 눌려져있는 마우스 버튼의 값 (왼: 1, 우: 2, 휠: 4, 4번째버튼: 8:, 5번째버튼: 16)
• clientX, clientY: 이벤트 발생 시, View포트 영역상의 좌표 스크롤에 영향을 받지 않음
• layerX, layerY: HTML요소 영역상 좌표 (IE 이외 브라우저)
• offsetX, offsetY: HTML요소 영역상 죄표 (IE 브라우저)
• pageX, pageY: 마우스 이벤트가 일어났을 때의 HTML문서 영역상 좌표
• screenX, screenY: 마우스 이벤트가 일어났을 때 모니터 화면 영역상 좌표

수식어

@click.stop 으로 이벤트 버블링을 막을 수 있다. e.stopPropagation() 와 동일한 효과다.

stop수식어 외에도 비슷한 기능이지만 phase마다 .capture .self처럼 다르게 쓸 수 있다.

@click.once는 이벤트를 한 번만 실행시킨다.

키코드 수식어 별칭 (유용할 듯)

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

마우스 수식어

.left .right .middle