본문으로 바로가기

[Vue.js] Event Handling

category 분류없음 2019.07.11 17:57

1. v-on

디렉티브를 사용하여 DOM 이벤트를 실행할 때 사용 한다.

<v-btn v-on:click="counter += 1">Add 1<v-btn>

v-on 을 대체해서 @을 사용할 수 있다.

<v-btn @click="counter += 1">Add 1<v-btn>

 

2. 이벤트 전파 이벤트 전파로 원하는 이벤트 외에 다른 이벤트까지 발생하는 상황 발생할 경우
이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이고,

event.preventDefault() : 기본 이벤트의 자동 실행을 중지시킴
event.stopPropagation() : 이벤트의 전파를 막음

Vue 에서는 다음과 같이 이용되고 있다.

<v-btn @click.prevent="counter += 1">Add 1<v-btn>


prevent 외에 다른 수식어는 다음과 같다.


@click.stop : 이벤트 전파 중단시킴
@click.capture : 이벤트 버블링 우선 순위 변경 (즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리)
@click.self : 자신으로 부터 출발하는 이벤트일때만 호출하고 싶을 때
@click.once : 이벤트가 한번만 실행 (2.1.4 부터 사용 가능)
@scroll.passive : 스크롤의 기본 이벤트를 취소 (2.3.0 부터 시용 가능)
@keyup.13: 와 같은 키이벤트도 있음 (13은 키코드의 수식어 이다)


또한 수식어는 다음과 같이 체이닝하여 사용 가능하다.

<v-btn @click.prevent.stop="counter += 1">Add 1<v-btn>

@click.prevent.self 를 사용하면 클릭 이벤트가 발생 했을 때 모든 엘리먼트의 기본 동작을 막을 수 있지만,

@click.self.prevent 는 엘리먼트 자체의 기본 동작만 막을 수 있다.

 

참고


댓글을 달아 주세요