이벤트가 발생했을 때, 이것이 퍼져나가는 방식에는 2가지가 있다. 하나는 버블링 방식이고 하나는 캡쳐링 방식이다.
버블링
한 요소에 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 아래에서 위로 올라가는 게 거품이 퍼져나가는 것 같다고 해서 버블링이라고 한다는 썰이 있다.
버블링은 event.stopPropagation() 을 이용해서 중지할 수 있다.
캡쳐링
버블링의 반대 방식이라고 생각하면 편하다. 자주 쓰이지는 않는다고 한다. 캡쳐링은 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 자식 요소의 핸들러가 동작한다. 최하단의 요소를 만날 때까지 이 과정을 반복한다. addEventListener의 3번째 인자로 {capture : true}를 주면, 해당하는 요소의 이벤트가 상위 요소보다 먼저 발생한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid;
background-color: red;
overflow: auto;
}
.child {
width: 200px;
height: 1000px;
border: 10px solid;
background-color: aqua;
font-size: 40px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<a href="https://nodiemecarry.tistory.com" target="_blank">NoDieMeCarry</a>
</div>
</div>
<input/>
<script>
// 이벤트 전파 (버블) 정지
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');
const anchorEl = document.querySelector('a');
window.addEventListener('click', event => {console.log('Window');
});
document.body.addEventListener('click', event => {console.log('Body!');
});
parentEl.addEventListener('click', event => {
console.log('Parent!');
event.stopPropagation(); // 이벤트 전파 정지!
});
childEl.addEventListener ('click', event => {
console.log('child!');
});
anchorEl.addEventListener('click', event => {
console.log('Anchor!')
});
// anchor 클릭 -> child -> parent -> Body -> Window로 올라감(콘솔 찍어보면)
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 이벤트 - Mouse Event (0) | 2023.04.24 |
|---|---|
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
| [JavaScript] 이벤트(Event, addEventListener) (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 Promise, Async와 await (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 (콜백) (0) | 2023.04.21 |
이벤트가 발생했을 때, 이것이 퍼져나가는 방식에는 2가지가 있다. 하나는 버블링 방식이고 하나는 캡쳐링 방식이다.
버블링
한 요소에 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 아래에서 위로 올라가는 게 거품이 퍼져나가는 것 같다고 해서 버블링이라고 한다는 썰이 있다.
버블링은 event.stopPropagation() 을 이용해서 중지할 수 있다.
캡쳐링
버블링의 반대 방식이라고 생각하면 편하다. 자주 쓰이지는 않는다고 한다. 캡쳐링은 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 자식 요소의 핸들러가 동작한다. 최하단의 요소를 만날 때까지 이 과정을 반복한다. addEventListener의 3번째 인자로 {capture : true}를 주면, 해당하는 요소의 이벤트가 상위 요소보다 먼저 발생한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid;
background-color: red;
overflow: auto;
}
.child {
width: 200px;
height: 1000px;
border: 10px solid;
background-color: aqua;
font-size: 40px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<a href="https://nodiemecarry.tistory.com" target="_blank">NoDieMeCarry</a>
</div>
</div>
<input/>
<script>
// 이벤트 전파 (버블) 정지
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');
const anchorEl = document.querySelector('a');
window.addEventListener('click', event => {console.log('Window');
});
document.body.addEventListener('click', event => {console.log('Body!');
});
parentEl.addEventListener('click', event => {
console.log('Parent!');
event.stopPropagation(); // 이벤트 전파 정지!
});
childEl.addEventListener ('click', event => {
console.log('child!');
});
anchorEl.addEventListener('click', event => {
console.log('Anchor!')
});
// anchor 클릭 -> child -> parent -> Body -> Window로 올라감(콘솔 찍어보면)
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 이벤트 - Mouse Event (0) | 2023.04.24 |
|---|---|
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
| [JavaScript] 이벤트(Event, addEventListener) (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 Promise, Async와 await (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 (콜백) (0) | 2023.04.21 |
