아래와 같은 그림이 있다. 해당 그림은 각 네모박스마다. click 이벤트가 등록되어 있는데
아래 코드처럼 이벤트가 등록되어있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outer {
width: 500px;
height: 500px;
background-color: greenyellow;
}
.middle {
width: 50%;
height: 50%;
margin: auto;
background-color: blue;
transform: translateY(50%);
}
button {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<button>Click Me</button>
</div>
</div>
<script>
const outer = document.querySelector('.outer');
const middle = document.querySelector('.middle');
const button = document.querySelector('button');
outer.addEventListener('click', (event) => {
console.log(`outer: ${event.currentTarget}, ${event.target}`);
});
middle.addEventListener('click', (event) => {
console.log(`middle ${event.currentTarget}, ${event.target}`);
});
button.addEventListener('click', (event) => {
console.log(`button ${event.currentTarget}, ${event.target}`);
});
</script>
</body>
</html>여기서 Click Me 버튼을 클릭하면 콘솔로그에는 아래 그림 처럼 나타난다. 이유가 뭘까? 바로 이벤트 버블링 때문이다.
이벤트 버블링이란?
자식 요소가 이벤트가 발생이 되면 부모도 자신이 등록된 이벤트가 호출 되는 것이다. 가장 최상단의 부모까지 이벤트가 발생한다. 다시 정리하면
이벤트 버블링은 HTML 요소에서 이벤트가 발생하면 해당 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정을 의미합니다. 즉, 자식 요소에서 이벤트가 발생하면 부모 요소까지 이벤트가 전파되는 것을 말합니다.
즉, Click Me 결과에 저렇게 나온 이유가 Click Me 버튼을 클릭하면 이벤트가 발생이 되고 나면, 최상단의 부모요소까지 등록된 이벤트가 호출되기 떄문에 저런 결과가 나온 것이다.
그러면 버블링이 안되게 중단은 안 될까?
당연히 된다. 바로 event.stopPropagation()과 event.stopImmediatePropagation()이 있는데 둘 다 자기 자신 이벤트만 호출되도록 막지만 stopImmediatePropagation()은 같은 요소에 등록된 여러 이벤트 중에서 먼저 등록된 것들을 제외하고 나머지 이벤트들은 호출을 안시킨다.
그럼 캡처링은 뭐에요?
캡처링은 버블링의 반대라고 생각하면 된다. 즉 가장 최상단의 부모요소부터 이벤트가 발생 되어 아래까지 내려가면서 호출된다.
실행 조건은 아래 코드처럼 세번째 인자로 {capture:true}를 명시해주면 캡처링때 이벤트가 발생된다.
outer.addEventListener(
'click',
(event) => {
console.log(`outer: ${event.currentTarget}, ${event.target}`);
},
{ capture: true }
);'언어 > 자바스크립트' 카테고리의 다른 글
| 클로저(Closures) (1) | 2024.02.21 |
|---|---|
| 실행 컨텍스트(렉시컬 스코프, 렉시컬 환경, 스코프 체인, 호이스팅) 이 글로 끝내버리기 (0) | 2023.05.13 |
| BigInt 큰 숫자 다루기 (0) | 2023.04.12 |
| 자바스크립트 This 이걸로 끝내기 (0) | 2023.03.28 |
| Iteration Protocol(for of, spread) (0) | 2023.03.21 |
