[Vue.js] 이벤트 수식어 와 키 수식어

이벤트 수식어

이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다.

이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사 입니다.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

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

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

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

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

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

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

관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시 말하여 v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며 v-on:click.self.prevent는 엘리먼트 자체에 대한 클릭만 방지합니다.

 

<!-- 클릭 이벤트는 최대한 한번에 트리거 됩니다.-->
<a @click.once="doThis"></a>

네이티브 DOM이벤트에 독점적인 다른 수식어들과 달리, .once 수식어는 component events에서도 사용될 수 있습니다. 아직 컴포넌트에 대해서 읽지 않았더라도 걱정하시마십시오.

또한 Vue는 addEventListener의 passive option (opens new window)에 해당하는 .passive 수식어도 제공합니다.

 

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<!-- 바로, `onScroll`완료되는 것을 기다리는 것을 대신합니다.  -->
<!-- 이 경우에`event.preventDefault()`를 포함하고 있습니다. -->
<div @scroll.passive="onScroll">...</div>

특히 .passive 수식어는 모바일 환경에서 성능향상에 도움이 됩니다.

.prevent 수식어는 무시되고 브라우저에서 오류를 발생시키기 때문에, .passive 수식어와 .prevent 수식어를 함께 사용하지 마십시오. .passive 수식어는 당신이 이벤트의 기본 행동을 무시하지 않기를 원하는 브라우저와 상호작용한다는 사실을 기억하십시오.

 

키 수식어

키보드 이벤트를 청취할 때, 종종 공동 키 코드를 확인해야 합니다.
Vue에서 키 이벤트를 청취할 때 키 수식어로 v-on 또는 @를 더할 수 있습니다.

<!-- 키가 'Enter'일때만 `vm.submit()`을 호출할 수 있습니다.-->
<input @keyup.enter="submit" />

KeyboardEvent.key 를 통해 노출된 유효 키 이름을 케밥 케이스로 변환하여 수식어로 사용할 수 있습니다.

<input @keyup.page-down="onPageDown" />

위의 예제에서, 핸들러는 $event.key === PageDown 일 때만 호출됩니다.

키 명령어

Vue는 가장흔히 사용되는 키에서 명령어를 제공합니다:

• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right

시스템 수식어 키목록

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

• .ctrl
• .alt
• .shift
• .meta

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

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

수식어 키는 일반 키와 다르며 keyup 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉,keyup.ctrl은 ctrl을 누른 상태에서 키를 놓으면 트리거됩니다. ctrl키만 놓으면 트리거되지 않습니다.

 

.exact수식어

.exact 수식어는 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌러야하는 것을 요구합니다.

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

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

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

마우스 버튼 수식어

• .left
• .right
• .middle

위 수식어는 특정 마우스 버튼에 의해 트리거 된 이벤트로 핸들러를 제한합니다.