04. Vue 이벤트

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단계를 거친다.

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

• 1. 포착단계 : 밖에서 부터 이벤트를 발생시킨 HTML 요소까지 포착해 들어감.
• 2. 이벤트 발생
• 3. 상위 요소로, 동일한 이벤트 호출시킴.

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 클릭 이벤트 역시 실행됌.

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

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

역시 수식어를 사용가능

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

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

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

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

  ​

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

Reference

Vue.js Quick Start 원형섭

Comment and share