v-on 또는 @를 사용.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="example" class="container layout1">
<p><input type="text" v-model="amount" class="form-control" /></p>
<p>
<button id="deposit" @click="balance += parseInt(amount)"
class="btn btn-primary">예금</button>
<button id="withdraw" v-on:click="balance -= parseInt(amount)"
class="btn btn-primary">인출</button>
</p>
<h3>계좌 잔고 : {{balance}}</h3>
</div>

<script type="text/javascript">
var vm = new Vue({
el : "#example",
data : {
amount : 0,
balance : 0,
}
})

이벤트 객체

  • target : 이벤트가 발생한 HTML 요소를 리턴함.
  • currentTarget : 이벤트 리스너가 발생시키는 HTML 요소를 리턴함.
  • path: 배열 값, HTML 요소로부터 document, window 객체로까지 거슬러 올라가는 경로를 나타냄.
  • bubbles : 버블링을 일으키는 이벤트인지 여부 리턴함.
  • cancelable : 기본 이벤트를 방지할 수 있는지 여부를 리턴.
  • defaultPrevented : 기본 이벤트가 방지되었는지 여부를 나타냄.
  • eventPhase : 이벤트 흐름의 단계를 나타냄. 포착 -> 이벤트발생 -> 버블링.

이벤트 메서드

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

기본 이벤트

다음과 같은 기본 이벤트를 말함

a요소 클릭 href 경로로 페이지 이동, 브라우저 화면 마우스 오른쪽 클릭-> 컨텍스트메뉴 나타남, form submit 버튼 클릭 action 경로로 함수 실행

위 preventDefault를 실행해주면, 위 기본 이벤트가 막힘.

preventDefulat 더 쉽게 하려면 vue에서 제공해주는 .prevent를 사용하시라.

<div id="example" @contextmenu.prevent="ctxStop">

이벤트 전파와 버블링

HTML 문서의 이벤트 처리는 3단계를 거친다.

event propagation에 대한 이미지 검색결과

문서 내의 요소에서 이벤트가 발생!

    1. 포착단계 : 밖에서 부터 이벤트를 발생시킨 HTML 요소까지 포착해 들어감.
    1. 이벤트 발생
    1. 상위 요소로, 동일한 이벤트 호출시킴.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="example">
<div id="outer" @click="outerClick">
<div id="inner" @click="innerClick"></div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#example",
methods : {
outerClick : function(e) {
console.log("### OUTER CLICK")
console.log("Event Phase : ", e.eventPhase);
console.log("Current Target : ", e.currentTarget);
console.log("Target : ", e.target);
},
innerClick : function(e) {
console.log("### INNER CLICK")
console.log("Event Phase : ", e.eventPhase);
console.log("Current Target : ", e.currentTarget);
console.log("Target : ", e.target);
}
}
})

inner만 클릭해도, outer 클릭 이벤트 역시 실행됌.

inner outer
eventPhase 2(AT_TARGET) 3(BUBBLING)
current target inner outer
target inner inner

target은 오리지널을 계속 가리키고, currentTarget은 현재 이벤트가 실행되는 위치를 나타냄을 보라!

이때 e.stopPropagation()을 실행하면, 이벤트 버블링을 막을 수 있다.

역시 수식어를 사용가능

  • @click.stop : 이벤트 전파 중단시킴

  • @click.capture : CAPTURING_PHASE 단계에서만 이벤트 발생

  • @click.self : RAISING_PHASE 일때만 이벤트 발생

  • @click.once : 이벤트가 한번만.

  • @keyup.13: 와 같은 키이벤트도 있음 (13은 키코드의 수식어 이다)

Reference

Vue.js Quick Start 원형섭