-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathKeyboardEvents-lecture.html
162 lines (106 loc) · 3.67 KB
/
KeyboardEvents-lecture.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Keyboard Events Lecture</title>
<style>
body {min-height: 2000px;}
</style>
</head>
<body>
<main>
<h1 id="some-header">Keyboard Events Lecture</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid blanditiis delectus enim est itaque molestiae necessitatibus pariatur quo, rerum sunt tempore temporibus unde ut vel. Eaque necessitatibus quos temporibus.</p>
<input id="input-example" type="text">
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
"use strict";
// !! key events fired in the following order: keydown->keypress->keyup !!
// ===== keydown
// recognizes all keyboard keys when they are pushed down
// repeats as key is held down
// $(document).keydown(function() {
// console.log("Key down");
// });
// ===== keypress
// recognizes the character that is typed
// only recognizes keys that can have a typed output
// $(document).keypress(function() {
// console.log("Key press");
// });
// ===== keyup
// recognizes all keyboard keys when they are pushed down
// recognizes all keyboard keys when they are released
// will fire only once per key push
// $(document).keyup(function() {
// console.log("Key up");
// });
// keyboard events listeners can be bound to specific DOM elements
// $('#input-example').keyup(function(e) {
// console.log('From input element: ' + $(e.target).val());
// });
/*
Question 1:
A keyup event will repeat while a key is held down
A) True
B) False
Question 2:
A keypress event will not fire when the arrow keys are pressed.
A) True
B) False
Question 3:
Keydown, keypress and keyup event listeners are bound to the document. When a key is typed, all
events will fire simultaneously.
A) True
B) False
*/
// ===== on
// https://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click
// https://www.pdiniz.com/why-you-should-always-use-jquerys-onclick-instead-of-click/
// recognizes vanilla JS events, NOT jQuery event names
// dynamically added elements will also listen for .on() events
// $('h1').click(function() {
// console.log('h1 clicked');
// });
// $('main').on('click', 'h1', function() {
// console.log('h1 clicked');
// });
//
// $('main').append('<h1>Another h1</h1>');
// $(document).on("keydown", function() {
// console.log('key down event');
// });
// ===== off
// removes all events from a selector or a specific event/selector/handler
// $(document).off("keydown");
// ===== preventDefault()
// $(document).keydown(function(e) {
// console.log(e.key);
// if (e.key === " ") {
// e.preventDefault();
// }
// });
/*
Question 1:
Why is the .on() method preferred over the more specific event methods?
A) Events can still be fired for dynamically added elements
B) Events can be removed from an element
C) The .on method can save more memory in applying one handler rather than many to a group of elements
D) A and C
E) A, B and C
Question 2:
The event object can be used for:
A) Preventing default behavior
B) Obtaining information about what key was typed
C) All of the above
D) None of the above
*/
// ===== konami code!
// https://www.goskills.com/
});
</script>
</body>
</html>