Notice
Recent Posts
Recent Comments
Link
SeouliteLab
[JS/JavaScript] 이벤트 버블링과 이벤트 캡처링: 이벤트 전파의 이해 본문
JavaScript에서 이벤트 버블링과 이벤트 캡처링은 이벤트가 DOM 트리를 통해 전파되는 방식을 설명하는 개념이다. 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 반면, 이벤트 캡처링은 상위 요소에서 시작하여 이벤트가 발생한 요소로 전파되는 방식이다. 이 둘을 이해하면 이벤트 핸들링에 대한 이해도를 높일 수 있다.
- 이벤트 캡처링 (Event Capturing): 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 전파되는 과정이다. 즉, 이벤트가 발생한 요소에서부터 시작이 아닌 최상위 요소에서부터 시작하여 하위 요소로 이벤트가 전파된다. 이벤트 캡처링은 일반적으로 거의 사용되지 않으며, 대부분의 경우에는 이벤트 버블링이 사용된다.
- 이벤트 버블링 (Event Bubbling): 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전파되는 과정을 말한다. 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 것이 특징이며, 이는 DOM 트리의 구조와 일치한다. 이벤트 버블링은 가장 일반적으로 사용되는 이벤트 전파 방식이며, 이벤트 핸들링에 있어서 가장 흔히 사용된다.
아래는 간단한 예제를 통해 이벤트 버블링과 이벤트 캡처링을 설명이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling and Capturing Example</title>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">Click me!</div>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
}, true); // 이벤트 캡처링 활성화
document.getElementById('middle').addEventListener('click', function() {
console.log('Middle div clicked');
}, true); // 이벤트 캡처링 활성화
document.getElementById('inner').addEventListener('click', function() {
console.log('Inner div clicked');
}, true); // 이벤트 캡처링 활성화
</script>
</body>
</html>
위 코드에서는 세 개의 <div> 요소가 중첩되어 있고 각 요소에 클릭 이벤트 리스너가 추가되어 있다. 세 개의 요소 모두 이벤트 캡처링을 활성화했으므로 클릭이 발생할 때 이벤트는 최상위 요소에서 시작하여 하위 요소로 전파된다. 즉, 클릭 이벤트가 발생한 요소부터 시작이 아닌 최상위 요소인 outer에서부터 시작되어 inner 요소로 전파된다.
이러한 이벤트 전파 방식을 이해하면 이벤트 핸들러를 효과적으로 관리할 수 있다. 또한, 이벤트 버블링과 이벤트 캡처링은 이벤트 위임(Event Delegation) 패턴을 구현하는 데 중요한 역할을 한다.
'프로그래밍' 카테고리의 다른 글
| [JS/JavaScript] 뒤로가기 버튼에서 발생하는 캐시: BF캐시 (BFCache)에 대해 알아보기 (0) | 2024.02.27 |
|---|---|
| [JS/JavaScript] 따옴표와 백틱: 문자열 표기의 다양성 (0) | 2024.02.27 |
| [JS/JavaScript] 일급 객체: 함수와 데이터의 동등성 (0) | 2024.02.27 |
| [JS/Javascript] 호이스팅이란? ( Hoisting ) (0) | 2024.02.27 |
| [JS] V8 엔진(자바스크립트 엔진)이란? (0) | 2024.02.27 |