기타
이벤트 버블링, 핸들링
js0616
2024. 7. 28. 04:29
이벤트 버블링 (Event Bubbling)
이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 방식입니다.
발생요소 -> 최상위 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">클릭해주세요</div>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('outer 버블링');
});
document.getElementById('middle').addEventListener('click', function() {
console.log('middle 버블링');
});
document.getElementById('inner').addEventListener('click', function() {
console.log('inner 버블링');
});
</script>
</body>
</html>
이벤트 캡처링 (Event Capturing)
이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 실제 이벤트 대상 요소로 전파되는 방식입니다.
최상위 -> 이벤트 대상
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">클릭해주세요</div>
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('outer 캡처링');
}, true);
document.getElementById('middle').addEventListener('click', function() {
console.log('middle 캡처링');
}, true);
document.getElementById('inner').addEventListener('click', function() {
console.log('inner 캡처링');
}, true);
</script>
</body>
</html>