Skip to content

Commit 18ac2dd

Browse files
elfgoddelfgodd
committed
Section 15: The Event Object
1 parent 89653ee commit 18ac2dd

5 files changed

Lines changed: 87 additions & 4 deletions

File tree

‎15-Communicating-with-Events/05/app.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const colors = [
3434
// })
3535
// }
3636

37-
// Using THIS keywordq
37+
// Using THIS keyword
3838
const changeColor = function () {
3939
const h1 = document.querySelector('h1')
4040
h1.style.color = this.style.backgroundColor
@@ -53,6 +53,6 @@ for (let color of colors) {
5353
}
5454

5555
const h2 = document.querySelector('h2')
56-
h2.addEventListener('mouseover', function() {
57-
console.log(h2.innerText);
58-
})
56+
h2.addEventListener('mouseover', function () {
57+
console.log(h2.innerText)
58+
})

‎15-Communicating-with-Events/06/app.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#boxes {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
}
6+
7+
.box {
8+
width: 200px;
9+
height: 200px;
10+
}
11+
12+
h2 {
13+
text-align: center;
14+
}

‎15-Communicating-with-Events/06/app.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// ******************************
2+
// The Event Object ******************************
3+
// Example 1
4+
console.log('The Event Object')
5+
console.log('\n')
6+
7+
const colors = [
8+
'red',
9+
'orange',
10+
'yellow',
11+
'green',
12+
'blue',
13+
'purple',
14+
'indigo',
15+
'violet',
16+
]
17+
18+
const changeColor = function (event) {
19+
// Click on a color box to see the event object in the browser console
20+
console.log(event)
21+
const h1 = document.querySelector('h1')
22+
h1.style.color = this.style.backgroundColor
23+
console.log(this)
24+
console.log(this.style.backgroundColor)
25+
}
26+
27+
const container = document.querySelector('#boxes')
28+
29+
for (let color of colors) {
30+
const box = document.createElement('div')
31+
box.style.backgroundColor = color
32+
box.classList.add('box')
33+
container.appendChild(box)
34+
box.addEventListener('click', changeColor)
35+
}
36+
37+
// Key event
38+
document.body.addEventListener('keypress', function(event) {
39+
console.log(event);
40+
console.log(event.keyCode)
41+
console.log(event.key)
42+
})

‎15-Communicating-with-Events/06/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="app.css" />
8+
<title>JavaScript</title>
9+
</head>
10+
<body>
11+
<h1>The Event Object</h1>
12+
<hr />
13+
<h2>Pick a Color</h2>
14+
<section id="boxes">
15+
16+
</section>
17+
<script src="app.js"></script>
18+
</body>
19+
</html>

‎15-Communicating-with-Events/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,11 @@ How do we get access to the size of the screen?
9191

9292
## 5. Events on Multiple Elements
9393

94+
## 6. The Event Object
95+
96+
When a function is called, example: changeColor function, we're never executing changeColor ourself. It's being called for us and it's actually passed a value, it's pass an event object.
97+
98+
And this event object sometimes is extremely useful to have access to in our callback in our event handler. So we have access to it, it's automatically passed every single time.
99+
100+
We need to add in a parameter `changeColor(event)`, usually you'll see **e** or **event** **or** evt.
101+

0 commit comments

Comments
 (0)