Skip to content

Commit 14c0329

Browse files
seankmchenryseankmchenry
committed
Progress on wesbos#25 
1 parent d1438c1 commit 14c0329

File tree

2 files changed

+261
-19
lines changed

2 files changed

+261
-19
lines changed

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

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,84 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Understanding JavaScript's Capture</title>
6-
</head>
7-
<body class="bod">
8-
9-
<div class="one">
10-
<div class="two">
11-
<div class="three">
12-
</div>
13-
</div>
14-
</div>
6+
<link rel="stylesheet" href="style.css">
7+
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,500,700" rel="stylesheet">
158

16-
<style>
9+
<style>
1710
html {
1811
box-sizing: border-box;
1912
}
20-
*, *:before, *:after { box-sizing: inherit; }
13+
*, *:before, *:after {
14+
box-sizing: inherit;
15+
}
16+
body {
17+
padding: 0;
18+
font-family: "Raleway", sans-serif;
19+
}
20+
21+
.main {
22+
max-width: 1200px;
23+
margin: 0 auto;
24+
padding: 20px;
25+
}
2126

22-
div {
23-
width:100%;
24-
padding:100px;
27+
.main div {
28+
width: 100%;
29+
padding: 100px;
30+
cursor: pointer;
2531
}
2632

2733
.one {
2834
background: thistle;
35+
margin-bottom: 1.5em;
2936
}
30-
3137
.two {
32-
background:mistyrose;
38+
background: mistyrose;
3339
}
34-
3540
.three {
36-
background:coral;
41+
background: coral;
42+
}
43+
button {
44+
font-weight: 500;
3745
}
3846
</style>
47+
</head>
48+
<body>
49+
50+
<div class="main">
51+
52+
<div class="one">
53+
<div class="two">
54+
<div class="three">
55+
</div>
56+
</div>
57+
</div>
58+
59+
<button class="pure-button">I'm a button</button>
60+
</div>
3961

40-
<button></button>
4162
<script>
63+
// adding the event listener to all divs (below)
64+
// will cause event bubbling (clicking the innermost
65+
// div will cause a click event on both of its parents
66+
const divs = document.querySelectorAll('.main div');
67+
68+
function logText(e) {
69+
// this will cause the click event to only
70+
// happen on the div that was clicked:
71+
e.stopPropagation();
72+
73+
// console.log(this.classList.value);
74+
console.log(this);
75+
76+
// divs.forEach(div => div.removeEventListener('click', logText));
77+
}
4278

79+
divs.forEach(div => div.addEventListener('click', logText, {
80+
capture: false,
81+
// this is same as using 'removeEventListener' above ⬆
82+
once: true
83+
}));
4384
</script>
4485
</body>
4586
</html>

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/**
2+
* style.css
3+
*/
4+
5+
/*
6+
Buttons
7+
*/
8+
.pure-button {
9+
/* Structure */
10+
display: inline-block;
11+
zoom: 1;
12+
line-height: normal;
13+
white-space: nowrap;
14+
vertical-align: middle;
15+
text-align: center;
16+
cursor: pointer;
17+
-webkit-user-drag: none;
18+
-webkit-user-select: none;
19+
-moz-user-select: none;
20+
-ms-user-select: none;
21+
user-select: none;
22+
box-sizing: border-box;
23+
}
24+
25+
/* Firefox: Get rid of the inner focus border */
26+
.pure-button::-moz-focus-inner {
27+
padding: 0;
28+
border: 0;
29+
}
30+
31+
/* Inherit .pure-g styles */
32+
.pure-button-group {
33+
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
34+
*letter-spacing: normal; /* reset IE < 8 */
35+
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
36+
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
37+
}
38+
39+
.opera-only :-o-prefocus,
40+
.pure-button-group {
41+
word-spacing: -0.43em;
42+
}
43+
44+
.pure-button-group .pure-button {
45+
letter-spacing: normal;
46+
word-spacing: normal;
47+
vertical-align: top;
48+
text-rendering: auto;
49+
}
50+
51+
/*csslint outline-none:false*/
52+
53+
.pure-button {
54+
font-family: inherit;
55+
font-size: 100%;
56+
padding: 0.5em 1em;
57+
color: #444; /* rgba not supported (IE 8) */
58+
color: rgba(0, 0, 0, 0.80); /* rgba supported */
59+
border: 1px solid #999; /*IE 6/7/8*/
60+
border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
61+
background-color: #E6E6E6;
62+
text-decoration: none;
63+
border-radius: 2px;
64+
}
65+
66+
.pure-button-hover,
67+
.pure-button:hover,
68+
.pure-button:focus {
69+
/* csslint ignore:start */
70+
filter: alpha(opacity=90);
71+
/* csslint ignore:end */
72+
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
73+
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
74+
}
75+
.pure-button:focus {
76+
outline: 0;
77+
}
78+
.pure-button-active,
79+
.pure-button:active {
80+
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
81+
border-color: #000\9;
82+
}
83+
84+
.pure-button[disabled],
85+
.pure-button-disabled,
86+
.pure-button-disabled:hover,
87+
.pure-button-disabled:focus,
88+
.pure-button-disabled:active {
89+
border: none;
90+
background-image: none;
91+
/* csslint ignore:start */
92+
filter: alpha(opacity=40);
93+
/* csslint ignore:end */
94+
opacity: 0.40;
95+
cursor: not-allowed;
96+
box-shadow: none;
97+
pointer-events: none;
98+
}
99+
100+
.pure-button-hidden {
101+
display: none;
102+
}
103+
104+
.pure-button-primary,
105+
.pure-button-selected,
106+
a.pure-button-primary,
107+
a.pure-button-selected {
108+
background-color: rgb(0, 120, 231);
109+
color: #fff;
110+
}
111+
112+
/* Button Groups */
113+
.pure-button-group .pure-button {
114+
margin: 0;
115+
border-radius: 0;
116+
border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */
117+
border-right: 1px solid rgba(0, 0, 0, 0.2);
118+
119+
}
120+
121+
.pure-button-group .pure-button:first-child {
122+
border-top-left-radius: 2px;
123+
border-bottom-left-radius: 2px;
124+
}
125+
.pure-button-group .pure-button:last-child {
126+
border-top-right-radius: 2px;
127+
border-bottom-right-radius: 2px;
128+
border-right: none;
129+
}
130+
131+
.pure-form .pure-group button {
132+
margin: 0.35em 0;
133+
}
134+
135+
/*
136+
Media Queries
137+
*/
138+
@media only screen and (max-width : 480px) {
139+
.pure-form button[type="submit"] {
140+
margin: 0.7em 0 0;
141+
}
142+
143+
.pure-form input:not([type]),
144+
.pure-form input[type="text"],
145+
.pure-form input[type="password"],
146+
.pure-form input[type="email"],
147+
.pure-form input[type="url"],
148+
.pure-form input[type="date"],
149+
.pure-form input[type="month"],
150+
.pure-form input[type="time"],
151+
.pure-form input[type="datetime"],
152+
.pure-form input[type="datetime-local"],
153+
.pure-form input[type="week"],
154+
.pure-form input[type="number"],
155+
.pure-form input[type="search"],
156+
.pure-form input[type="tel"],
157+
.pure-form input[type="color"],
158+
.pure-form label {
159+
margin-bottom: 0.3em;
160+
display: block;
161+
}
162+
163+
.pure-group input:not([type]),
164+
.pure-group input[type="text"],
165+
.pure-group input[type="password"],
166+
.pure-group input[type="email"],
167+
.pure-group input[type="url"],
168+
.pure-group input[type="date"],
169+
.pure-group input[type="month"],
170+
.pure-group input[type="time"],
171+
.pure-group input[type="datetime"],
172+
.pure-group input[type="datetime-local"],
173+
.pure-group input[type="week"],
174+
.pure-group input[type="number"],
175+
.pure-group input[type="search"],
176+
.pure-group input[type="tel"],
177+
.pure-group input[type="color"] {
178+
margin-bottom: 0;
179+
}
180+
181+
.pure-form-aligned .pure-control-group label {
182+
margin-bottom: 0.3em;
183+
text-align: left;
184+
display: block;
185+
width: 100%;
186+
}
187+
188+
.pure-form-aligned .pure-controls {
189+
margin: 1.5em 0 0 0;
190+
}
191+
192+
/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
193+
.pure-form .pure-help-inline,
194+
.pure-form-message-inline,
195+
.pure-form-message {
196+
display: block;
197+
font-size: 0.75em;
198+
/* Increased bottom padding to make it group with its related input element. */
199+
padding: 0.2em 0 0.8em;
200+
}
201+
}

0 commit comments

Comments
 (0)