JavaScript > Event > Keyboard Event > add

8_Events/Html/index.html

@@ -26,7 +26,7 @@ <h1 class="app-title" id="header">To Do App</h1>
             <input id="txtTaskName" name="taskName" type="text" class="form-control" placeholder="Type a new task"
               aria-describedby="btnAddNewTask">
             <div class="input-group-append">
-              <button class="btn btn-primary" type="button" id="btnAddNewTask">
+              <button class="btn btn-primary" type="submit" id="btnAddNewTask">
                 <i class="fas fa-plus"></i>
               </button>
             </div>

8_Events/JavaScripts/21_8_3_Keyboard_Event.js

@@ -1,12 +1,37 @@
 // Keyboard Event
 const input = document.querySelector('#txtTaskName');
-
+const form = document.querySelector("form")
+
     //** Keyboard Press
-    input.addEventListener('keydown',eventHandler)
+    //input.addEventListener('keydown',eventHandler)
 
     //** Keyboard Break up
-    input.addEventListener('keyup',eventHandler)
+    // input.addEventListener('keyup',eventHandler)
+
+    //** Keyboard Press
+    //input.addEventListener('keypress',eventHandler)
+
+    //** Focus
+    // input.addEventListener('focus',eventHandler)
+
+    //** Cut -> control + x -> press
+    // input.addEventListener('cut',eventHandler)
+
+    //** Paste -> control + v -> press
+    // input.addEventListener('paste',eventHandler)
+
+    //*-* Submit 
+    form.addEventListener('submit',eventHandler)
+
+    //*-* Select 
+    input.addEventListener('select',eventHandler)
+
+
 
     function eventHandler(x){
-        console.log(`Event type : ${x.type}`);
+        console.log(`Event type : ${x.type} , Keyboard Code: ${x.keyCode} , Keyboard Value: ${x.target.value} `);
+
+
+        // x.preventDefault()
+        // x.target.style.backgroundColor='yellow'
     }