Skip to content

Commit ca23ff0

Browse files
author
vanntile
committed
Day 25
1 parent 270410e commit ca23ff0

7 files changed

Lines changed: 62 additions & 116 deletions

File tree

‎25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎25 - Event Capture, Propagation, Bubbling and Once/index-START.html‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎25 - Event Capture, Propagation, Bubbling and Once/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Understanding JavaScript's Capture</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body class="bod">
11+
12+
<div class="one">
13+
<div class="two">
14+
<div class="three">
15+
</div>
16+
</div>
17+
</div>
18+
19+
<button></button>
20+
<script src="script.js"></script>
21+
</body>
22+
23+
</html>

‎25 - Event Capture, Propagation, Bubbling and Once/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const divs = document.querySelectorAll('div')
2+
3+
const logText = function (e) {
4+
console.log(this.classList.value)
5+
// stop bubbling the event up
6+
//e.stopPropagation()
7+
}
8+
9+
divs.forEach(div => div.addEventListener('click', logText, {
10+
// run the function on the capture down
11+
// capture: true
12+
// unbind the event for further clicks
13+
once: true
14+
}))

‎25 - Event Capture, Propagation, Bubbling and Once/style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
div {
10+
width: 100%;
11+
padding: 100px;
12+
}
13+
14+
.one {
15+
background: thistle;
16+
}
17+
18+
.two {
19+
background: mistyrose;
20+
}
21+
22+
.three {
23+
background: coral;
24+
}

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Check the course at [https://JavaScript30.com](https://JavaScript30.com)
4242
22. [x] [Follow Along Link Highlighter](https://vanntile.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter)
4343
23. [ ] Speech Synthesis
4444
24. [x] [Sticky Nav](https://vanntile.github.io/JavaScript30/24%20-%20Sticky%20Nav)
45-
25. [ ] Event Capture, Propagation, Bubbling, and Once
45+
25. [x] [Event Capture, Propagation, Bubbling, and Once](https://vanntile.github.io/JavaScript30/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once)
4646
26. [x] [Stripe Follow Along Nav](https://vanntile.github.io/JavaScript30/26%20-%20Stripe%20Follow%20Along%20Nav)
4747
and my [notes](./26%20-%20Stripe%20Follow%20Along%20Nav)
4848
27. [ ] Click and Drag

‎assets/img/25 - Event Capture, Propagation, Bubbling and Once.png‎

24.5 KB
Loading

0 commit comments

Comments
 (0)