<!DOCTYPE html>
<html>
<head>
<style>
html, body {height:100%;}
</style>
</head>
<body>
<p> 버블링과 캡쳐링 이벤트 <button>버튼</button></p>
<script>
// document.querySelector('p').addEventListener('click', () => {
// console.log('Handle for paragragh');
// });
document.querySelector('p').addEventListener('click', () => {
console.log('Handle for paragragh');
}, true);
document.body.addEventListener('click', () => {
console.log('Handle for body');
});
document.querySelector('button').addEventListener('click', () => {
console.log('Handle for button');
});
</script>
</body>
</html>true(p) 가 없으면 button > p(버블링) > body(버블링) 로 이벤트 전파
true(p) 가 있으면 p(캡쳐링) > button > body(버블링) 로 이벤트 전파
