Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f6edac9

Browse files
Day 25 - Event Capture, Propagation, Bubbling and Once
1 parent f3c62d3 commit f6edac9

File tree

6 files changed

+84
-0
lines changed

6 files changed

+84
-0
lines changed

‎25_day/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>24 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body class="bod">
11+
12+
<div class="one">
13+
<div class="two">
14+
<div class="three">
15+
<p><em>Please have a look at the JavaScript Console where you can see result of below code</em> 💁</p>
16+
</div>
17+
</div>
18+
</div>
19+
<button></button>
20+
<script type="text/javascript" src="main.js"></script>
21+
</body>
22+
23+
</html>

‎25_day/main.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: #b41811;
16+
}
17+
18+
.two {
19+
background: rgb(93, 14, 138);
20+
}
21+
22+
.three {
23+
background: coral;
24+
}

‎25_day/main.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const divs = document.querySelectorAll('div');
2+
const button = document.querySelector('button');
3+
4+
function logText(e) {
5+
console.log(this.classList.value);
6+
}
7+
8+
divs.forEach(div => div.addEventListener('click', logText, {
9+
capture: false,
10+
once: true
11+
}));
12+
13+
button.addEventListener('click', () => {
14+
console.log('Click!!!');
15+
}, {
16+
once: true
17+
});

‎25_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,3 +139,8 @@ Learned about `Element.getBoundingClientRect()` method and worked on some css ef
139139

140140
### Day 24: 11 Jul 2018
141141
Sticky Nav was really an interesting challenge. Learned about the requirement of padding top in nav element and other UI effects using css.
142+
143+
### Day 25: 12 Jul 2018
144+
Learned about `Event.stopPropagation()` & `EventTarget.addEventListener()` boolean options like capture, once & passive. More details about it here:
145+
- https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
146+
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<a class="active" href="./22_day/index.html">22 Day</a>
3434
<a class="active" href="./23_day/index.html">23 Day</a>
3535
<a class="active" href="./24_day/index.html">24 Day</a>
36+
<a class="active" href="./24_day/index.html">25 Day</a>
3637
</div>
3738
</body>
3839

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /