key events

last-endcode · last-endcode · commit decb8a034b28 · 2020-10-27T15:34:10.000+07:00
diff --git a/19_key_events.js b/19_key_events.js
@@ -0,0 +1,17 @@
+// keypress - when key is pressed
+// keydown - when key is down
+// keyup - when key is released
+
+const inputName = document.querySelector('.inputName');
+
+inputName.addEventListener('keypress', function () {
+  console.dir('u r press key');
+});
+
+// inputName.addEventListener('keydown', function () {
+//   console.log('u r press key');
+// });
+
+// inputName.addEventListener('keyup', function () {
+//   console.dir(inputName);
+// });
diff --git a/index.html b/index.html
@@ -141,10 +141,15 @@ <h2>On container</h2>
       <h1>Hello World</h1>
     </div> -->
 
+    <!-- addEventListener, function reference
     <div class="container">
       <h3>The Pirates</h3>
       <button class="btn">Join</button>
-    </div>
+    </div> -->
+
+    <!-- key events -->
+    <input type="text" class="inputName" />
+
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
     <!-- <script src="/02_getElementByTagName.js"></script> -->
@@ -163,6 +168,7 @@ <h3>The Pirates</h3>
     <!-- <script src="/15_remove_removeChild.js"></script> -->
     <!-- <script src="/16_innerHTML_textContent.js"></script> -->
     <!-- <script src="/17.addEventListener.js"></script> -->
-    <script src="/18_function_reference.js"></script>
+    <!-- <script src="/18_function_reference.js"></script> -->
+    <script src="/19_key_events.js"></script>
   </body>
 </html>
