이벤트 전파(Event Propagation)
브라우저에서 발생된 이벤트는 window 객체에 먼저 도착하고 DOM Tree를 이용하여 이벤트가 발생된 태그에 도착한 후 다시 반대방향으로 이동하여 window 객체에 도착한 다음 이벤트는 소멸된다.
이벤트 전파는 HTML 요소 간에 발생한 이벤트가 어떻게 전파되는지를 나타내는 개념이다. 이벤트 전파는 이벤트가 발생한 요소부터 상위 요소로 전달되는 방식에 따라 캡쳐링(Capturing) 단계와 버블링 단계(Bubbling)로 구분할 수 있다.
캡쳐링(Capturing) 단계
- 캡쳐링은 이벤트가 window 객체(최상위 요소)로부터 시작하여 타겟 객체(이벤트가 발생된 요소)까지 모든 객체에 이벤트가 전파되는 과정이다.
- 이벤트가 상위 요소로 전파되면서 하위 요소에서 상위 요소까지 차례대로 이벤트를 캡처링한다.
- 이벤트 전파 과정 중 capture 단계에 등록된 이벤트 리스너가 실행된다.
- 캡쳐링 단계는 대부분의 경우 사용되지 않으며, 기본값으로 설정된 false로 이벤트 리스너를 등록하면 해당 요소에서 발생한 이벤트만 처리된다.
버블링(Bubbling) 단계
- 버블링은 이벤트가 타겟 객체(이벤트가 발생된 요소)에서 시작하여 window 객체(최상위 요소)까지 이벤트가 전파되는 과정이다.
- 이벤트가 발생한 요소에서 상위 요소로 전파되면서 상위 요소에서 하위 요소까지 차례대로 이벤트를 버블링한다.
- 이벤트 전파 과정 중 bubble 단계에 등록된 이벤트 리스너가 실행된다.
- 버블링 단계에서 이벤트 리스너를 등록하면, 상위 요소에서 발생한 이벤트도 하위 요소의 이벤트 리스너에서 처리할 수 있다.
이벤트 전파는 기본적으로 버블링 방식을 따르며, 대부분의 경우에는 이벤트 리스너를 등록할 때 capture 단계를 사용하지 않고 bubble 단계에서 이벤트를 처리한다. 그러나 필요에 따라 캡처링 단계에서도 이벤트 리스너를 등록하여 이벤트 전파를 컨트롤할 수 있다.
event.stopPropagation() : 이벤트 전달을 중지하는 메소드
→ 주로 캡처링보다 버블링을 중지할 때 많이 사용한다.
예시)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
div {
border: 1px solid black;
padding: 30px;
text-align: center;
}
#red{ background: red; }
#green{ background: green; }
#blue{ background: blue; }
</style>
</head>
<body>
<div id="red">
<div id="green">
<div id="blue"></div>
</div>
</div>
<script>
document.getElementById("red").onclick=function() {
location.href="https://www.daum.net";
event.stopPropagation();//버블링 중지
}
document.getElementById("green").onclick=function() {
location.href="https://www.naver.com";
event.stopPropagation();
}
document.getElementById("blue").onclick=function() {
location.href="https://www.google.com";
event.stopPropagation();
}
</script>
</body>
</html>
사용자가 각 <div> 요소를 클릭할 때 해당 URL로 이동하게 되고, event.stopPropagation() 메소드를 이용하여 이벤트 전파가 중지되므로 부모 요소에 등록된 이벤트 리스너는 실행되지 않는다.
'학원 > 복기' 카테고리의 다른 글
| [JavaScript] DHTML(Dynamic HTML) (0) | 2023.06.11 |
|---|---|
| [JavaScript] addEventListener 메소드 (0) | 2023.06.11 |
| [JavaScript] 이벤트 처리(Event Handle) / this 키워드 / 태그의 기본 이벤트 처리 기능 (0) | 2023.06.09 |
| [JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체 (0) | 2023.06.09 |
| [JavaScript] BOM(Browser Object Model) (0) | 2023.06.08 |
