69 lines
1.1 KiB
HTML
69 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Understanding JavaScript's Capture</title>
|
||
|
|
<link rel="icon" href="https://fav.farm/✅" />
|
||
|
|
</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>
|
||
|
|
const divs = document.querySelectorAll('div');
|
||
|
|
const button = document.querySelector('button');
|
||
|
|
|
||
|
|
function logText(e) {
|
||
|
|
console.log(this.classList.value);
|
||
|
|
// e.stopPropagation(); // stop bubbling!
|
||
|
|
// console.log(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
divs.forEach(div => div.addEventListener('click', logText, {
|
||
|
|
capture: false,
|
||
|
|
once: true
|
||
|
|
}));
|
||
|
|
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
console.log('Click!!!');
|
||
|
|
}, {
|
||
|
|
once: true
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|