지난 글에 이어 Javascript Event, 그중에서도 이벤트의 전파에 대해 알아보겠습니다.
2023.01.02 - [Javascript] - [Javascript] Javascript event, Event Handler란 무엇인가
[Javascript] Javascript event, Event Handler란 무엇인가
Javascript를 사용하는 브라우저 환경에서 이벤트란 무엇인지, 이벤트 핸들러와 핸들러를 등록하는 방식에는 어떤 것이 있는지 알아보도록 하겠습니다. (feat. addEventListener) 이벤트란? 브라우저 환
do-it-bobby.tistory.com
이벤트의 흐름
브라우저에서 특정 이벤트가 발생했을 때, 내부적으로 어떤 일이 일어날까요? addEventListener의 마지막 매개변수 useCapture를 이해하기 위해서라도 이벤트 흐름에 대해 알아볼 필요가 있습니다.
이벤트 전파
이벤트가 발생했을 때, 이벤트는 해당 요소에만 적용되는 것이 아닙니다. 특정 요소에 이벤트가 발생했을 때 HTML의 계층 구조에 따라 이벤트가 연쇄적으로 전파되는데, 이를 이벤트 전파라고 합니다. 이벤트의 전파는 전파 방향에 따라 두가지로 나눌 수 있습니다.
- 버블링: 이벤트가 발생한 요소(target)부터 해당 요소를 감싸고 있는 부모 요소까지 이벤트가 전파되는 것
- 캡쳐링: 버블링과 반대로 부모 요소부터 이벤트 발생 요소(target)까지 이벤트가 전파되는 것
여기서 중요한 점은 이벤트가 발생했을 때, 버블링과 캡쳐링 중 하나의 방식으로만 전파되지 않는다는 것입니다.
특정 이벤트가 발생했을 때 이벤트는 캡쳐링 -> 타겟 -> 버블링 의 단계를 거쳐 전파됩니다. 즉, 부모 요소로 부터 target으로, 다시 target부터 부모 요소로 이벤트가 전파되는 것입니다.
이벤트 버블링
이벤트 버블링이 어떤 방식으로 동작하는지 예제를 통해 알아보겠습니다.
<!DOCTYPE html>
<html>
<body>
<div>
<button class="btn">Click</button>
</div>
<script>
document.querySelector(".btn").addEventListener("click", function() {
console.log("button!");
});
document.querySelector("div").addEventListener("click", function() {
console.log("div!");
});
document.querySelector("body").addEventListener("click", function() {
console.log("body!");
});
</script>
</body>
</html>버튼을 클릭하게 되면 이벤트 전파 순서에 따라 먼저 캡쳐링 단계가 진행됩니다.
- body -> div -> button
그 후 타겟인 button을 거쳐 버블링 단계가 진행됩니다.
- button -> div -> body
addEventListener에 세번째 인자를 전달하지 않았으므로 세 가지 이벤트 핸들러 모두 버블링 단계에서 트리거 되고, 버블링에 해당하는 순서대로 각 요소에 등록된 이벤트 핸들러가 실행됨을 확인할 수 있습니다.
이벤트 캡쳐링
이번에는 캡쳐링의 경우를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<div>
<button class="btn">Click</button>
</div>
<script>
document.querySelector(".btn").addEventListener(
"click",
function() {
console.log("button!");
},
true
);
document.querySelector("div").addEventListener(
"click",
function() {
console.log("div!");
},
true
);
document.querySelector("body").addEventListener(
"click",
function() {
console.log("body!");
},
true
);
</script>
</body>
</html>addEventListener의 세번째 매개변수를 true로 넘기고 캡쳐링 단계에서 이벤트 핸들러를 트리거하도록 설정하면, 캡쳐링 단계에서만 이벤트 핸들러가 트리거 되므로 다음과 같은 결과를 얻을 수 있습니다.
버블링과 캡쳐링 동시 사용
아직 완벽히 이해하지 못한 분들을 위해 두 가지 경우를 함께 사용한 예를 한번 더 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<div>
<button class="btn">Click</button>
</div>
<script>
document.querySelector(".btn").addEventListener(
"click",
function() {
console.log("button!");
},
true
);
document.querySelector("div").addEventListener("click", function() {
console.log("div!");
});
document.querySelector("body").addEventListener(
"click",
function() {
console.log("body!");
},
true
);
</script>
</body>
</html>이 코드의 경우 어떻게 동작할까요?
body와 button은 캡쳐링 설정을, div는 버블링 설정을 해주었습니다. 위에서 말씀드린 이벤트의 전파 순서를 잘 생각해 보시면 답을 예상하실 수 있을 겁니다.
정답은 아래에 있습니다!👇🏻
이벤트는 캡쳐링 단계부터 진행되므로 body와 button의 이벤트 핸들러가 먼저 실행될 겁니다. 그 후 버블링 단계가 진행되면서 div의 이벤트 핸들러가 실행되며, 그에따라 결과는 아래와 같습니다.
예상한 답이 맞나요? 틀리셨더라도 포기하지 말고 다시 한번 천천히 읽어보시면 이해하실 수 있습니다!
이전 글에 이어 Javascript Event의 전파에 대해 알아보았습니다.
저조차도 습관적으로 이벤트 처리에 대한 코드를 작성해 왔는데, 글 작성을 위해 관련 자료들을 찾아보면서 이벤트에 대해 이론적으로 정리해 볼 수 있었던 시간이었습니다.
다음은 Javascript Event의 마지막 시리즈로 이벤트 위임, 이벤트 기본 동작의 취소, 이벤트 전파의 중단에 대해 다뤄보도록 하겠습니다.
'Javascript' 카테고리의 다른 글
| Javascript 실행 컨텍스트, 호이스팅, 클로저의 이해(2) (0) | 2023.02.11 |
|---|---|
| Javascript 실행 컨텍스트, 호이스팅, 클로저의 이해(1) (0) | 2023.02.09 |
| 자바스크립트 반복문 forEach, for-in, for-of 비교 (1) | 2023.01.25 |
| Javascript 이벤트 위임 패턴, 이벤트 전파 중단 (0) | 2023.01.19 |
| [Javascript] Javascript event, Event Handler란 무엇인가 (0) | 2023.01.02 |
댓글