이벤트

이벤트

https://ryuzuka.github.io/VUE/tutorial/04_event.html

• v-on ( 이벤트 )

v-on:[이벤트]="자바스크립트 표현식"

이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어려움

v-on에 methods의 함수를 넘겨주는 형태로 구현

$event라는 인자를 methods의 함수에 넘겨주어 DOM 이벤트 객체를 사용

<div id="app">

<div>

<div>count: {{ count }}</div>

<button v-on:click="count++;">count++</button>

<button v-on:click="increaseCount">increaseCount;</button>

<button v-on:click="increaseCount( $event )">increaseCount( $event );</button>

</div>

</div>

<script>

new Vue({

el: '#app',

data: {

count: 0,

},

methods: {

increaseCount ( $event ) {

this.count++;                     // this -> Vue 인스턴스

console.log( $event );            // 네이티브 DOM 이벤트

}

}

});

</script>

• 이벤트 전파와 버블링

버블링: 자식에서 이벤트가 발생하여 부모로 이벤트 전달

캡처링: 부모에서 이벤트가 발생하여 자식으로 이벤트 전달

• 이벤트 수식어

capture: 이벤트 capturing 적용

stop: 이벤트 전파 중단 ( event.stopPropagation() )

self: event.target이 해당 엘리먼트일때 실행

prevent: 브라우저의 기본 동작 중지 ( event.preventDefault() )

once: 한번만 이벤트 발생

passive: 모바일 환경에서 성능향상에 도움이 되는 이벤트 수식어

              지정한 이벤트 핸들러에서 event.preventDefault() 를 호출하지 않는 다는 것을 브라우저에 알림

              v-on:scroll.passive="onscroll" ( passive와 prevent 함께 사용 금지. 패시브 핸들러는 기본 이벤트를 막지 않음 )

• 키 수식어

키보드 이벤트를 수신할때 v-on에 대한 키 수식어 추가 ( 체이닝 가능 )

.enter

.tab

.delete ( “Delete” 와 “Backspace” 키 모두를 캡처 )

.esc

.space

.up

• 시스템 수식어 ( 보조키 수식어 )

.ctrl ( 키보드 이벤트 )

.alt

.shift

.meta

.left ( 마우스 이벤트 )

.right

.middle

.exact  

<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행됩니다. -->
<button @click.ctrl="onClick">A</button>

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

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

• 사용자 정의 키 수식어

ex) Vue.config.keyCodes.enter = 13;