[Vue.js] 이벤트 전파(버블링, 캡쳐링) 살펴보기

오랜만에 쓰는 포스팅이다.

이번에는 Vue에서 이벤트 전파에 관련된 포스팅을 쓰고자 한다.

자바스크립트 이벤트 버블링, 캡쳐링, 위임, 전파 등 여러 가지 아마 살펴봤을 걸로 기억한다.

면접이나 기술 질문에도 대부분 포함되는걸로 알고 있다.

그럴 때마다 공부하고 이해하고 다시 까먹고 반복 중이다.

이해가 안 되거나 잘 모르겠으면 우선 외우는 게 중요한 것 같다.

여기까지 온 사람이라면 아마 우선 외워야 할 것 같다.

개요

Vue를 통해 이벤트 Phase를 알아보기

버블링, 캡쳐링 살펴보기

Vue event modifier (prevent, self, stop) 살펴보기

 

예제 코드

<template>
  <div id="example">
    <div id="outer" @click="outerClick">
      Outer
      <div id="firstInner" @click.self="firstInnerClick">
        first Inner
        <div id="inner" @click="innerClick">Inner</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  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);
    },
    firstInnerClick: function (e) {
      console.log("### firstInnerClick 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);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

예제는 어떤 포스팅에서 보고 테스트한 거 같은데 출처를 잃어버렸다.

우선 이벤트에 대해 살펴보자.

 

1. 이벤트는 기본적으로 target을 클릭하면(여기서는 이벤트 발동 조건을 클릭으로 한정하겠다.) target 부모로 가서 거기서부터 이벤트를 감지하면서 내려온다. 이 과정을 캡쳐링(capture)라고 한다.(Phase 1단계)
   이때, 캡쳐링을 통해 감지만 한다. 이벤트를 발생시키지 않는다.
2. 그다음, 이벤트가 발생된, 즉 클릭한 target에 도착하면 이벤트를 발생시킨다.(Phase 2단계)
3. 그 다음, target에서 부터 다시 올라간다.(부모에서부터 내려왔던 순서 반대로 올라간다.)
   이때, 버블링이 발생하면서 이벤트를 발생시킨다.(Phase 3단계)

 

Phase 1단계 : Capture 부모서부터 타겟까지
Phase 2단계 : Target 타겟 그 자체
Phase 3단계 : Bubble 타겟으로부터 부모까지

 

정리하자면, 캡쳐링 단계에서는 이벤트를 감지만 하고 발생시키지 않고, 버블링 단계부터 이벤트를 감지하면서 발생시킨다.

만약, 캡쳐링 단계에서 이벤트를 발생시키고 싶으면 capture를 사용하면 된다.(@click.capture)

 

Vue Event Modifier(수식어) 간단하게 살펴보기

위에서 설명한 capture 수식어를 제외하고 여기서는 stop, self, prevent에 대해 살펴보자.

 

 STOP

이벤트 전파를 막는다.

위 예제 코드에서  <div id="outer" @click.capture.stop="outerClick"> 이렇게 수정하고 #inner 클릭하면 outerClick 만 이벤트가 발생하고 종료된다.

// 로그 결과
### OUTER CLICK
Event Phase : 1
Current Target : ▶<div id="outer">…</div>
Target : <div id="inner">Inner</div>

• <div id="firstInner" @click.stop="firstInnerClick"> 이렇게 수정하고 #inner 이벤트를 클릭하면 #inner 이벤트가 발생하고 그다음 #firstInner이벤트가 발생하고 종료된다. Phase 3 단계인 부모(#outer)한테까지 이벤트 버블링이 되지 않는다.

// 로그 결과
### INNER CLICK
Event Phase :2
Current Target :<div id="inner">Inner</div>
Target : <div id="inner">Inner</div>

### firstInnerClick CLICK
Event Phase :
3
Current Target :
▶<div id="firstInner">…</div>
Target : 
<div id="inner">Inner</div>

위 예제에서 수정하지 않는 나머지는 이벤트는 기본으로 설정했다.(@click)

 

SELF

이벤트 전파를 무시한다.(PASS 되는 느낌이다.)

• <div id="firstInner" @click.self="firstInnerClick"> 이렇게 수정하고 #inner 이벤트를 클릭하면 #inner 이벤트가 발생하고 그다음 #firstInner이벤트는 무시되고 바로 #outer 이벤트가 발생한다.

### INNER CLICK
Event Phase : 2
Current Target : <div id="inner">Inner</div>
Target : <div id="inner">Inner</div>
### OUTER CLICK
Event Phase : 3
Current Target : ▶<div id="outer">…</div>
Target : <div id="inner">Inner</div>

 

대략적인 뷰를 통해 이벤트 처리 과정을 살펴봤다.

자세한 이벤트 수식어나 바닐라 자바스크립트에 대한 이벤트 내용은 아래 참고자료를 통해 들어가서 살펴보면 된다.

마지막으로 위에 예제 코드 링크 주소입니다.

https://codesandbox.io/s/cocky-river-pqgov?file=/src/App.vue:52-71

 

 

 

참고자료

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

https://kr.vuejs.org/v2/guide/events.html