12_이벤트처리

v-on 디렉티브로 이벤트 처리 가능하고 @단축표현으로 사용 가능함

 

1.메소드 이벤트 핸들러

:v-on디렉티브에서 메소드 호출 가능하며, 이 때 매개변수로 event객체를 받는다.

const printEventInfo = (event) => {
  console.log(event.target);
  console.log(event.target.tagName);
};

<div>
  <button @click="printEventInfo">printEventInfo</button>
</div>

 

 

2. 이벤트 객체 접근

:$event 키워드를 사용하여 접근한다.

const printEventInfo2 = (message, event) => {
  console.log('messsage: ', message);
  console.log(event.target);
  console.log(event.target.tagName);
};

<button @click="printEventInfo2('hello world', $event)">
  inline event handler
</button>

 

 

3.이벤트 수식어 

:event.preventDefault()나 event.stopPropagation()같은 메서드를 이벤트 수식어를 통해 호출할 수 있다.

<!-- 클릭 이벤트 전파가 중단되었습니다. e.stopPropagation()-->
<a @click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. e.preventDefault()-->
<form @submit.prevent="onSubmit"></form>

<!-- 수정자는 체이닝이 가능합니다. e.preventDefault(),e.stopPropagation() -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

<!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
<!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div @click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.오로지 자기자신만 호출.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>

<!-- 모바일 장치의 성능을 개선하기 위해 터치 이벤트 리스너와 함께 사용함.-->
<div @scroll.passive="onScroll">...</div>

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener#%ED%8C%A8%EC%8B%9C%EB%B8%8C_%EC%88%98%EC%8B%A0%EA%B8%B0%EB%A1%9C_%EC%8A%A4%ED%81%AC%EB%A1%A4_%EC%84%B1%EB%8A%A5_%ED%96%A5%EC%83%81

EventTarget.addEventListener() - Web API | MDN

 

4. 키 수식어 

<input type="text" @keyup.enter="addTodo" />

-.enter

-.tab

-.delete(delete와 backspace 키 모두를 수신함)

-.esc

-.space

-.up

-.down

-.left

-.right

 

 

5. 시스템 키 수식어 

:해당 수식어 키가 눌러진 경우에 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있음

<!-- 알트 + 엔터 -->
<input @keyup.alt.enter="clear" />

<!-- 컨트롤 + 엔터 -->
<input @keyup.ctrl.enter="send" />

<!-- 컨트롤 + 클릭 -->
<div @click.ctrl="doSomething">Do something</div>

-.ctrl

-.alt

-.shift

-.meta (맥에서는 command 키 , 윈도우에서는 meta)

 

 

6. exact 수식어 

정확한 조합이 눌러져야함

<!-- 아래코드는 Alt 또는 Shift와 함께 눌렀을 때도 실행됩니다.-->
<button @click.ctrl="onClick">A</button>

<!-- 아래코드는 Ctrl키만 눌려져 있을 때 실행됩니다.-->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다.-->
<button @click.exact="onClick">A</button>

 

 

7. 마우스 버튼 수식어

-.left

-.right

-.middle