WorldDrknss/JavaScript.30
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Event Capture Day 25 of 30 Completed.

Browse Source
This commit is contained in:
Charles Showalter 2023-03-23 12:23:58 -07:00
parent 02ee4b4ffd
commit 88d421eaed
1 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
Event Capture [25-30]/index.html Normal file
View File

@ -0,0 +1,68 @@
<!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>