이벤트 버블링과 캡처링 / 스택과 큐

✅ 이벤트 버블링과 이벤트 캡처링

이벤트 버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작합니다.

가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

위의 예시에서, 가장 안쪽의 p tag를 클릭하면 p -> div -> form 순서로 3개의 alert창이 나오게 됩니다.

document 객체를 만날 떄까지 각 요소에 할당된 onClick 핸들러가 동작하게 됩니다.

 

이벤트 객체의 메서드인 event.stopPropagation() 를 사용하면 이벤트 버블링을 중단할 수 있습니다.

 

이벤트 캡처링

https://ko.javascript.info/bubbling-and-capturing

td를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파됩니다.(버블링단계) 이 과정을 통해 이벤트 핸들러가 호출됩니다.

실제 코드에서 자주 쓰이지는 않는다.

이벤트 흐름

1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

 

✅ 스택과 큐

스택 (Stack)

• 차곡 차곡 쌓아 올린 형태의 자료 구조
• 후입선출 LIFO (Last In First Out): 가장 마지막에 삽입된 자료가 가장 먼저 삭제됨
• 스택이 비어있을 때 자료를 꺼내려고 하면 스택 언더플로우가, 꽉 차있을 때 자료를 넣으려고 하면 스택 오버플로우가 발생함
• 사용 예시: 웹 브라우저 뒤로 가기, 문서 작업에서 Undo(Ctrl+Z), 역순 문자열 만들기. 재귀적 알고리즘 등

큐 (Queue)

• 사전적 의미: 줄을 서서 기다리는 것
• 선입선출 FIFO (First In First Out): 먼저 들어온 자료가 가장 먼저 삭제됨
• 사용 예시: 프린터 출력, BFS 알고리즘

 

✅ References

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

https://devuna.tistory.com/22

[자료구조] 스택 (STACK), 큐(QUEUE) 개념/비교 /활용 예시