2020. 4. 28. 20:30ㆍJavaScript
출처:
https://ko.javascript.info/bubbling-and-capturing
이벤트 버블링과 이벤트 캡처링은 child와 parent에 동일한 이벤트핸들러를 걸어 놨을 때, 또는 두 이벤트핸들러가 서로 겹치는(?) 관계일때(예를 들어 dblclick과 click) 해당하는 이야기다.
1. 이벤트 버블링: child가 감지하도록 설정한 이벤트가 발생했을 때, child의 이벤트 핸들러가 작동한 다음에 parent의 이벤트 핸들러도 작동한다.
child의 이벤트가 감지되어 콜백함수가 작동한 다음,
parent도 이벤트가 감지되어 콜백함수가 작동한다.
결과적으로 콘솔창에는 '아 응애예요'가 먼저 찍히고, 그 다음 'parent clicked'가 찍힌다.
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
거의 모든 이벤트는 버블링 됩니다.
키워드는 ‘거의’ 입니다.
focus 이벤트와 같이 버블링 되지 않는 이벤트도 있습니다. 버블링 되지 않는 이벤트의 종류에 대해선 조금 후에 알아보겠습니다. 몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 됩니다.
<!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>
<h2 id="title"> 버블버블 버블링 </h2>
<p id="parent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum, fugit incidunt illum quidem officiis nam aut architecto, ut ducimus eos repudiandae voluptates optio beatae eaque pariatur, esse molestiae odit?
<strong id="child">BUBBLE BUBBLE BUBBLING</strong>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias illo molestiae labore, vero maxime expedita possimus exercitationem natus suscipit culpa voluptatem odio nulla consequatur incidunt, optio officiis deserunt? Obcaecati, qui?
</p>
<script>
var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.addEventListener('click', function(){
console.log('parent clicked');
});
child.addEventListener('click', function(){
console.log('아 응애예요');
});
</script>
</body>
</html>
2. 이벤트 캡처링: child가 감지하도록 설정한 이벤트가 감지되었을 때, 그 child의 조상의 이벤트핸들러부터 작동한다.
상기의 코드에서 세번째 매개변수에 true를 쓰면 이벤트 캡처링 방식을 쓰겠다는 뜻이다.
child를 클릭했을 때, parent가 먼저 이벤트를 감지하여 'parent clicked'가 먼저 찍힌다. 그 다음 '아 응애예요'가 찍힌다.
parent.addEventListener('click', function(){
console.log('parent clicked');
}, true);
child.addEventListener('click', function(){
console.log('아 응애예요');
}, true);'JavaScript' 카테고리의 다른 글
| 자바스크립트 Promise 객체란? (0) | 2020.05.01 |
|---|---|
| 자바스크립트 setTimeout은 어떻게 작동하는가? (0) | 2020.05.01 |
| JavaScript EventHandler (0) | 2020.04.01 |
| Anonymous function, immediately invoked function, closure in JavaScript (0) | 2020.04.01 |
| 2020-03-22 var, let, const 차이 (0) | 2020.03.22 |