[Vue.js] 이벤트 전파(버블링, 캡쳐링) 살펴보기
하수도키
·2021. 8. 25. 22:27
오랜만에 쓰는 포스팅이다.
이번에는 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>
예제는 어떤 포스팅에서 보고 테스트한 거 같은데 출처를 잃어버렸다.
우선 이벤트에 대해 살펴보자.
- 이벤트는 기본적으로 target을 클릭하면(여기서는 이벤트 발동 조건을 클릭으로 한정하겠다.) target 부모로 가서 거기서부터 이벤트를 감지하면서 내려온다. 이 과정을 캡쳐링(capture)라고 한다.(Phase 1단계)
이때, 캡쳐링을 통해 감지만 한다. 이벤트를 발생시키지 않는다. - 그다음, 이벤트가 발생된, 즉 클릭한 target에 도착하면 이벤트를 발생시킨다.(Phase 2단계)
- 그 다음, 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
참고자료
'개발일기 > Vue.js' 카테고리의 다른 글
[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3 (0) | 2021.05.01 |
---|---|
[Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity (0) | 2021.04.19 |
[Vue.js] Vue 애니메이션(Animate) #1 - Transition (1) | 2021.04.11 |
[Vue.js] Portal-Vue 라이브러리 사용하기 (0) | 2021.03.26 |
[Vue.js] Vue3 + TypeScript #6 마지막 커스텀 타입 정의하기(Type Assertion, data, props, computed, methods) (0) | 2021.03.14 |