Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

개발자

[Vue] 이벤트 버블링 본문

개발자/Vue

[Vue] 이벤트 버블링

GoGo개발 2023. 2. 10. 17:06
이벤트 버블링이란?

 

클릭한 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