반응형
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Understanding JavaScript's Capture</title>
</head>
<body class="bod">
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; }
div {
width:100%;
padding:100px;
}
.one {
background: thistle;
}
.two {
background:mistyrose;
}
.three {
background:coral;
}
</style>
<button></button>
<script>
</script>
</body>
</html>
목표
이벤트 버블링과 이벤트 캡쳐에 대해서 이해해보자.
코드 분석
const divs = document.querySelectorAll('div');
const button = document.querySelector('button');
function logText(e) {
console.log(this.classList.value);
}
divs.forEach(div => div.addEventListener('click', logText, {
capture: false,
once: true
}));
사실 이번 챕터는 코드가 별로 중요한 내용이 없는 듯 하여 핵심만 짚겠다.
여기서 .addEventListener의 3번째 항목은 옵션항목으로서 작용한다.capture를 false값을 주게 되면 캡쳐는 안하는 것이고,once값을 true로 주게 되면 한번만 실행한다는 것이다.
중요한 내용은 이벤트 캡쳐링과 버블링인데 캡쳐는 이벤트를 실행시 부모부터 자식까지 내려가는 것을 의미하고, 버블링은 그 반대인 자식부터 부모까지 올라가는 것을 말한다.
.stopPropagation을 쓰게되면 버블링을 멈추겠다는 것이고, 캡쳐를 멈추는 것은 capture : false로 사용하면 된다.
마무리
이번 챕터를 통해 이벤트의 진행과정에 대해 좀 더 깊이 알아볼 수 있었다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 27. Click and Drag (0) | 2017.04.26 |
|---|---|
| 26. Stripe Follow Along Nav (0) | 2017.04.26 |
| 24. Sticky Nav (0) | 2017.04.26 |
| 23. Speech Synthesis (0) | 2017.04.26 |
| 22. Follow Along Link Highlighter (0) | 2017.04.26 |
