1. 이벤트 수식어란?
공식문서 바로가기
- 이벤트 수식어란 v-on 디렉티브에서 사용할 수 있는 다양한 수식어를 의미한다.
- 이벤트 수식어는 점(.)으로 시작하는 접미사의 형태로 chaining 처럼 사용한다.
2. 이벤트 수식어를 사용하는 이유
a) preventDefault
<template>
<a
href="https://google.com"
target="_blank"
@click="handler">Google</a>
</template>
<script>
export default {
methods: {
handler(event) {
event.preventDefault()
console.log('ABC!')
}
},
}
</script>
출력화면
개발자도구 콘솔화면
- 우선 preventDefault() 기능을 제외하고 생각해보자.
- 위의 코드는 링크를 클릭하면 새탭에 구글 사이트가 뜨고, 동시에 콘솔에 ABC! 라는 문자열이 출력되는 코드다.
- 하지만 preventDefault() 라는 기능으로 인해, 새탭에 구글 사이트는 열리지 않고 콘솔에만 위와같이 문자열이 출력된다.
a-1) preventDefault란?
- preventDefault()는 event 객체안에 있는 기능으로, 기본 동작을 막는 기능이다.
- 여기서 기본 동작이란, 개발자가 구현한 기능이 아닌 브라우저에 의해 기본적으로 제공되는 기능을 말한다.
- 링크를 통해 어떤 사이트로로 이동하는 기능은 브라우저에 기본적으로 탑재된 기능이다.
- preventDefault()를 사용하면 이러한 브라우저의 기본 탑재 기능들을 막을 수 있다.
a-2) 이벤트 수식어는 편하다.
- 위의 코드는 event 객체안에 들어있는 preventDefault() 기능을 사용한 것이다.
- 이벤트 핸들러에 event 객체를 넣고, 그로부터 preventDefault() 메소드를 사용하기까지 귀찮은 일이다.
- 이를 이벤트 수식어로 표현하면 정말 손쉽게 구현할 수 있다.
- 모든 이벤트 수식어는 event 객체가 내부에 갖고 있는 메소드를 쉽게 사용할 수 있도록 약어 형식으로 사용하는 것이다.
<template>
<a
href="https://google.com"
target="_blank"
@click.prevent="handler">Google</a>
</template>
<script>
export default {
methods: {
handler() {
console.log('ABC!')
}
},
}
</script>
a-3) 이벤트 수식어 chaining
- 이벤트 수식어는 chaining을 이용하여 여러개를 함께 사용할 수 있다.
3. 이벤트 수식어의 종류
a) once
- once라는 이벤트 수식어는 이벤트 핸들러를 단 한번만 동작하게 하는 기능이다.
- 위의 예제 코드를 예시로 하자면, 링크를 몇번을 클릭하든 ABC! 라는 문자열은 콘솔에 단 한번만 출력된다.
b) stop
- stop의 기능을 이해하기 위해서는 이벤트 버블링이 무엇인지 알아야 한다.
*이벤트 버블링: 자식 엘리먼트에 걸려있는 이벤트 핸들러가 발동되면 부모 엘리먼트의 이벤트 핸들러도 같이 발동되는 현상
- 이 이벤트 버블링을 방지하기 위해서 event 객체 내부에 존재하는 stopPropagation() 메소드가 있는데, 이와 동일한 기능을 이벤트 수식어로 표현한 것이 stop 이다.
- 자식 엘리먼트에 stop 이벤트 수식어가 적용되면 자식 엘리먼트에 걸려있는 이벤트 핸들러만 동작하게 된다.
c) capture
- capture 기능을 이해하기 위해서는 이벤트 캡쳐링이 무엇인지 알아야 한다.
*이벤트 캡쳐링:부모 엘리먼트에 걸려있는 이벤트 핸들러가 발동되면 자식 엘리먼트의 이벤트 핸들러도 같이 발동되는 현상
쉽게 설명하자면 이벤트 버블링과 반대되는 개념이다.
d) self
- self 기능은 이벤트 캡쳐링/버블링이 아니라 이벤트가 발생한 엘리먼트의 핸들러만 발동하도록 하는 기능이다.
- 다시 말하자면, 선택한 엘리먼트의 영역을 정확하게 target 한 경우에만 해당 엘리먼트의 핸들러가 발동하도록 하는 기능이다.
- 예제 코드를 통해서 살펴보자.
<template>
<div
class="parent"
@click="handlerA">
<div
class="child"
@click="handlerB"></div>
</div>
</template>
<script>
export default {
methods: {
handlerA(event) {
console.log(event.target)
console.log(event.currentTarget)
console.log('A!')
},
handlerB() {
console.log('B!')
}
},
}
</script>
<style lang="scss" scoped>
.parent {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: royalblue;
.child {
width: 100px;
height: 50px;
background-color: orange;
}
}
</style>
출력화면
d-1) 부모/자식 엘리먼트 모두 이벤트 수식어가 없는 경우
- 부모 엘리먼트를 클릭했을 때, 이벤트 캡쳐링 없음.
- 자식 엘리먼트를 클릭했을 때, 이벤트 버블링이 발생.
- 이벤트 버블링이 발생하는 이유는 이벤트 수식어가 없기 때문.
d-2) 부모 엘리먼트에 self 수식어를 적용한 경우
- 부모 엘리먼트를 클릭했을 때, 이벤트 캡쳐링 없음.
- 자식 엘리먼트를 클릭했을 때, 이벤트 버블링 없음.
d-3) 자식 엘리먼트에 self 수식어를 적용한 경우
- 부모 엘리먼트를 클릭했을 때, 이벤트 캡쳐링 없음.
- 자식 엘리먼트를 클릭했을 때, 이벤트 버블링 발생.
- 이벤트 버블링이 발생한 이유는, 자식 엘리먼트 클릭 시 부모 엘리먼트와 겹치기 때문.
e) passive
- 이벤트 핸들러에서 처리해야되는 로직이 너무 많아서 화면 로딩속도가 느려지거나 웹사이트의 퍼포먼스가 떨어지는 경우 사용한다.
- 기존에 이벤트 핸들러는 핸들러에 등록된 로직을 처리하면서 동시에 화면을 로딩하는 방식으로 작동한다.
- passive 수식어를 사용하면 핸들러에 등록된 로직과 화면 로딩에 필요한 연산을 구분하여 화면 로딩을 우선시 하고 로직은 내부적으로 처리하도록 하는 기능이다.
- 이벤트 핸들러가 처리해야할 로직이 많은 경우, passive 수식어를 사용하여 UX의 품질을 높일 수 있다.
댓글