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:

Create a File:
- Name it lesson47-events.html.

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>

Save the File.
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.

Javascript in 100 bits

Course by zooboole,

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