[Vue.js] Ch4 이벤트 처리

다양한 이벤트의 사용 방법에 대해서 다음의 문서를 참고하자.

https://developer.mozilla.org/ko/docs/Web/Reference/Events 

MDN Web Docs

https://www.w3schools.com

W3Schools Online Web Tutorials

 

 

 

1. 인라인 이벤트 처리

Vue.js에서 이벤트는 v-on 디렉티브를 이용해서 처리할 수 있다.

v-on:click 또는 @click으로 명시하면 된다.

 

2. 이벤트 핸들러 메서드

Vue 인스턴스에 메서드를 등록해서 이벤트 처리 함수로 연결할 수 있다.

 

    <div id="example" class="container layout1">
        <p><input type="text" v-model="amount" class="form-control" /></p>
        <p>
            <button id="deposit" v-on:click="deposit" class="btn btn-primary">예금</button>
            <button id="withdraw" v-on:click="withdraw" 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,
            },
            methods: {
                deposit: function(e) {
                    var amt = parseInt(this.amount);
                    if (amt <= 0) {
                        alert("0보다 큰 값을 예금해야 합니다");
                    } else {
                        this.balance += amt;
                    }
                },
                withdraw: function(e) {
                    var amt = parseInt(this.amount);
                    if (amt <= 0) {
                        alert("0보다 큰 값을 인출할 수 있습니다");
                    } else if (amt > this.balance) {
                        alert("잔고보다 많은 금액을 인출할 수 없습니다");
                    } else {
                        this.balance -= amt;
                    }
                }
            }
        })
    </script>

 

3. 이벤트 객체

 

위의 코드를 보면, 이벤트를 처리하는 메서드로 첫 번째 파라미터로 이벤트 객체를 전달 받는다. 이 이벤트 객체를 통해서 이용할 수 있는 정보가 많다.

 

속성명	설명
target	이벤트가 발생한 HTML 요소를 리턴함
currentTarget	이벤트리스너가 이벤트를 발생시키는 HTML 요소를 리턴함
path	배열값. 이벤트 발생 HTML 요소로부터 document, window 객체로까지 거슬로 올라가는 경로를 나타냄
eventPhase	이벤트 흐름의 단계를 나타냄 1. 포착(CAPTURING_PHASE) 2. 이벤트 발생(AT_TARGET) 3. 버블릭(BUBBLING_PHASE)

 

4. 기본 이벤트

 

<a> 요소는 클릭 이벤트 처리를 하지 않았음에도 클릭하면 href특성에 정의된 경로로 화면을 이동시킨다.

이와 같이 이미 정의되어 있는 이벤트를 기본 이벤트라고 부른다.

 

이러한 기본 이벤트 실행을 중지시킬 수 있는 방법도 있다.

    <div id="example" v-on:contextmenu.prevent="ctxStop">
        <a href="https://facebook.com" @click="confirmFB">페이스북</a>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#example",
            methods: {
                ctxStop: function(e) {},
                confirmFB: function(e) {
                    if (!confirm("페이스북으로 이동할까요?")) {
                        e.preventDefault();
                    }
                }
            }
        })
    </script>

이와 같이 e.preventDefault()함수를 쓰면 <a>태그를 클릭해도 링크로 이동하지 않게 할 수 있다.

매번 메소드를 지정해줄 수 없으니 이벤트 수식어로 편리하게 사용할 수 있다.

<div id="example" v-on:contextmenu.prevent="ctxStop">

 

5. 이벤트 전파와 버블링

 

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

1단계 : 문서 내의 요소에서 이벤트가 발생했을 때 HTML문서의 밖에서부터 이벤트를 발생시킨 HTML 요소까지 포착해 들어가는 이벤트 포착 단계이다. (CAPTURING_PHASE)

2단계 : 이벤트를 발생시킨 요소에 다다르면 요소의 이벤트에 연결된 함수를 직접 호출시키는 이벤트 발생 단계이다. (RAISING_PHASE:AT_TARGET)

3단계 : 이벤트가 발생한 요소로부터 상위 요소로 거슬러 올라가면서 동일한 이벤트를 호출시키는 버블링 단계 (BUBBLING_PHASE)

 

이벤트 전파 방식

여기서 3단계인 버블링 단계에 주목해보자. 

간단히 말하자면 target(이벤트가 발생한 곳)에서부터 상위요소로 거슬러 올라가면서 동일한 이벤트를 호출하는 것이다.

 

아래 사진에서, 노란색 inner을 클릭했어도 콘솔에서 보면 이 이벤트가 상위로 올라오면서 outer에 걸려있는 이벤트도 호출되고 있는 것을 확인할 수 있다. → 버블링

 

이벤트 버블링을 막으려면 stopPropagation()메소드를 호출하면 된다.

  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);
        e.stopPropagation();
    },
    innerClick : function(e) {
        console.log("### INNER CLICK")
        console.log("Event Phase : ", e.eventPhase);
        console.log("Current Target : ", e.currentTarget);
        console.log("Target : ", e.target);    
        e.stopPropagation();
    }
  }

또는 인라인 이벤트로 아래와 같이 작성해줘도 된다.

<div id="example">
    <div id="outer" @click.capture.stop="outerClick">
        <div id="inner" @click.stop="innerClick"></div>
    </div>
</div>

 

6. 이벤트 수식어

.prevent, .stop, .self 와 같이 이벤트 메서드에 수식어를 붙일 수 있다.

 

• one 수식어
  • v-on:click.once="specialEvent" : 해당 메소드를 한번만 수행한다.
  • v-on:keyup="search" / e.keyCode = "13" / v-on:keyup.13 : 엔터를 눌렀을 때만 메소드를 실행시키게 할 수 있다.
  • @@mouseup.left="leftMouse" : 왼쪽 마우스 클릭시 이벤트