Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00

Lesson 47 - Different Types of JavaScript Events

JavaScript provides a wide variety of events that allow you to interact with web pages dynamically. These events can be triggered by user actions such as clicking, typing, scrolling, submitting a form, or even moving the mouse.

Types of Events

1. Mouse Events (Triggered by mouse interactions)

  • click -> When an element is clicked
  • dblclick -> When an element is double-clicked
  • mousedown -> When the mouse button is pressed
  • mouseup -> When the mouse button is released
  • mousemove -> When the mouse moves over an element
  • mouseenter -> When the mouse enters an element
  • mouseleave -> When the mouse leaves an element

2. Keyboard Events (Triggered when a user interacts with the keyboard)

  • keydown -> When a key is pressed down
  • keyup -> When a key is released
  • keypress -> (Deprecated) When a key is pressed

3. Form Events (Triggered when interacting with form elements)

  • submit -> When a form is submitted
  • change -> When the value of an input changes
  • input -> When an input field receives input
  • focus -> When an input field gains focus
  • blur -> When an input field loses focus

4. Window Events (Triggered by actions on the browser window)

  • resize -> When the window is resized
  • scroll -> When the user scrolls
  • load -> When the page is fully loaded
  • unload -> When the user leaves the page

Example 1: Click Event

document.getElementById("myButton").addEventListener("click", function () {
    alert("Button Clicked!");
});
  • This triggers an alert when the button is clicked.

Example 2: Keydown Event

document.addEventListener("keydown", function (event) {
    console.log("Key Pressed:", event.key);
});
  • This logs the key pressed in the browser console.

Example 3: Form Submit Event

document.getElementById("myForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Prevents form submission
    alert("Form Submitted!");
});
  • This prevents the form from submitting and shows an alert.

Try Your Hand

Steps:

  1. Create a File:

    • Name it lesson47-events.html.

  2. Write the Code:

    • Copy the following:

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Events</title>
</head>
<body>
<button id="clickMe">Click Me</button>
<input type="text" id="textInput" placeholder="Type something">
<form id="form">
   <input type="text" placeholder="Enter Name">
   <button type="submit">Submit</button>
</form>

<script>
   document.getElementById("clickMe").addEventListener("click", function () {
       alert("Button Clicked!");
   });

   document.getElementById("textInput").addEventListener("keydown", function (event) {
       console.log("Key Pressed:", event.key);
   });

   document.getElementById("form").addEventListener("submit", function (event) {
       event.preventDefault();
       alert("Form Submitted!");
   });
</script>
</body>
</html>

  3. Save the File.

  4. Open it in a Browser to See the Different Event Actions.

Key Takeaways

  • JavaScript events let you interact with users dynamically.
  • Events include mouse clicks, keyboard presses, form submissions, and window changes.
  • The addEventListener method allows handling multiple events efficiently.