개발자
[Vue] 이벤트 버블링 본문
이벤트 버블링이란?
클릭한 DOM과 겹쳐있는 부모나,자식 DOM까지 같이 선택이 되어서 이벤트가 발생 하는 것을이벤트 전파 현상이라 함
- 버블링은 자신을 포함해 부모의 이벤트 까지 발생시키는 것
- 캡처링은 반대로 자신을 포함해 자식의 이벤트 까지 발생시키는 것
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다.
HTML요소는 트리 형식이죠? 그렇다면 그 랜딩페이지에서 <Body />가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있죠.
브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가집니다. 이 것을 ' 이벤트 버블링' 이라고 합니다.
우리는 이 이벤트버블링과 캡처링등을 통해 이벤트 위임을 할 수 있습니다. 이 이벤트 위임을 간략하게 설명하면 '하위 요소의 이벤트를 상위 요소에 위임한다'라고 말할 수 있을 것 같습니다.
즉, 하위요소의 이벤트를 상위에서 제어합니다.
만약 하위 요소에서 이벤트를 제어하게 된다면, 새로운 아이템 즉 하위요소에 새로운 요소가 하나 더 추가될 때 마다 이벤트리스너를 계속해서 등록해줘야 합니다. 하지만 이 하위요소들이 존재하는 상위 요소에서 이벤트를 제어하게 된다면 하위요소가 추가될 때 마다 따로 이벤트리스너를 등록하지 않아도 됩니다.
쉽게 말하면, 상위요소에서 계속 감시를 하고 있다가 하위 요소에서 이벤트가 발생하면, 상위 요소에서 그 것을 제어하는 것입니다.
이벤트 전파
이벤트 수식어
- stop : 이벤트 전파를 중지한다(버블링,캡쳐링)
- prevent : 기본 이벤트가 발생하지 않게 한다.(원래 이벤트가 지니고 있던 실행동작을 막음)
- self : 자신으로부터 시작하는 이벤트만 수행함(이벤트 발생 단계일 때만 실행한다)
- capture : 캡쳐링 단계만 실행한다 (이벤트 동작하는 것들 중 우선순위가 높게 책정됨, 이벤트 중 먼저 실행 됨)
- once : 이벤트를 한번만 발생시킨다(이벤트가 수행될 시 여러 이벤트 중첩상황이더라도 한번의 이벤트만 수행)
- 마우스 수식어: 마우스 왼쪽(.left), 오른쪽(.right), 휠(.middle) 클릭 시 사용
- 키보드 수식어: 키보드 관련 이벤트. 키보드 키를 누를 때 사용. .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift
- 조건에 따라 기본 이벤트를 막아야 되는 경우 preventDefault() 메서드를 이용하여 기본 이벤트 실행을 중지한다.
|
1
2
3
4
5
6
7
8
9
|
new Vue({
el: '#test',
methods:{
onClickButton: function(e){
e.preventDefault();
}
}
});
|
cs |
- 이벤트 수식어(.prevent)로 기본 이벤트 실행을 중지한다.
<a href=https://www.naver.com @click.prevent=“onClickButton” />
참고 블로그
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.
joshua1988.github.io
'개발자 > Vue' 카테고리의 다른 글
| [Vue] v-on/기본 이벤트/css클래스 바인딩/computed/[Vue] Computed/method/watch 의 차이는 무엇일까? (0) | 2023.02.13 |
|---|---|
| ♣[Vue] <냅다해보기> 부모,자식간 데이터 이동 / emit, computed 등 이용해서 구현해보기 (0) | 2023.02.10 |
| ♣[Vue]vue 동작원리 이해해보기(component,App,main.js) / vscode로 v-model/v-if 등 적용해보기 (0) | 2023.02.10 |
| [Vue] v-bind/v- if/v-for/input데이터/v-model(데이터 양방향 바인딩) (0) | 2023.02.10 |
| [Vue] Vue 란?(MVVM 패턴/적용해보기 예제) (0) | 2023.02.10 |
'개발자/Vue' Related Articles
more
