Mastering JavaScript Events - Ultimate Reference Guide

By Harshit Kumar | 2023-11-28

10 min read ◦ javascript

JavaScript Array Image

Introduction to JavaScript Events

Have you ever wondered how a web page knows when you click a button, submit a form, or type something on your keyboard? That magic is called JavaScript events! In the exciting world of web development, events are like secret messages that your web page receives, telling it when something important happens.

Imagine your web page as a busy playground. Each time you swing on the swings, slide down the slide, or even just stand still, the playground (your web page) is aware of what you're doing. JavaScript events are like little spies that watch and report back to your web page whenever you interact with it.

In this beginner's guide, I am going to lift the curtain on JavaScript events. We'll discover the different types of events, like when you click a mouse, press a key, or submit a form. We'll also learn how to make your web page respond to these events, creating a more dynamic and interactive experience for anyone who visits.

So, buckle up and get ready for a journey into the fascinating world of JavaScript events – where every click, tap, and keypress brings your web page to life!

Let's break down how JavaScript events work

Imagine your web page as a smart friend who's always paying attention. This friend has a special ability to notice when you do things like clicking a button, moving your mouse, or typing on your keyboard. These actions are like secret signals that your friend can understand.

Now, JavaScript is the language that helps your friend not just notice these signals but also do something fun or useful in response. It's like having a little helper who listens for your every move and says, "Hey, something happened!"

Here's how the magic unfolds:

Listener Setup: Imagine your friend putting on their listening ears (these are like event listeners in JavaScript). These ears are set up to pay attention to specific things, like when you click a button or press a key.
Signal Detection: When you perform an action on the web page, like clicking a button, a signal is sent out. JavaScript catches this signal and says, "Aha! Something just happened!"
Reaction Time: Once JavaScript knows that you did something, it can make your web page react. It might change the color of a button, show a hidden message, or even play a sound – whatever you've told it to do.

Let's break it down with an example:

Example: Button Click

You click a button on a web page.
JavaScript, with its event listener ears, hears the click.
JavaScript follows the instructions you gave it when you set up the listener: "When the button is clicked, change the background color to blue."
Yes! The button's background turns blue as a response to your click.

Now below is the list of all the important and basic javascript events that every javascript or web developer needs to create dynamic website or web application -

Mouse Events

01. `click`

The click event in JavaScript is a fundamental and widely used event that occurs when a user clicks on an HTML element. It's often used to trigger a specific action or function in response to a user interaction, such as a button click.

The click event is triggered when the user presses and releases the mouse button over an element.

Example

Simple example where we have an HTML button, and we want to show an alert when the button is clicked -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Click Event Example</title>
</head>
<body>

  <button id="myButton">Click me!</button>

  <script>
    // Get the button element by its id
    var myButton = document.getElementById('myButton');

    // Add a click event listener to the button
    myButton.addEventListener('click', function() {
      // This function will be called when the button is clicked
      alert('Button clicked!');
    });
  </script>

</body>
</html>

Explanation

document.getElementById('myButton'): Retrieves the button element using its id.
myButton.addEventListener('click', function() );: Attaches a click event listener to the button. The second parameter is an anonymous function that gets executed when the button is clicked.
alert('Button clicked!');: The code inside the function displays an alert saying "Button clicked!".

Key Points:

Event Binding: The addEventListener method is used to bind the click event to the HTML element.
Event Handle: The function inside addEventListener is the event handler. It contains the code that should be executed when the click event occurs.
Interaction: The click event is user-triggered and is commonly used for various interactive elements like buttons, links, and other clickable elements.
Preventing Default Behavior: In more complex applications, you might want to prevent the default behavior of the click event (e.g., prevent a form submission). You can achieve this by using event.preventDefault() within the event handler.

02. `dblclick`

The dblclick event in JavaScript occurs when a user double-clicks on an HTML element. It is triggered when the user quickly clicks the mouse button twice on the same element within a short time period.

Example

Change its background color when the user double-clicks on it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>dblclick Event Example</title>
  <style>
    #myElement {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      text-align: center;
      line-height: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div id="myElement">Double Click me!</div>

  <script>
    // Get the element by its id
    var myElement = document.getElementById('myElement');

    // Add a dblclick event listener to the element
    myElement.addEventListener('dblclick', function() {
      // This function will be called when the element is double-clicked
      myElement.style.backgroundColor = 'lightgreen';
    });
  </script>

</body>
</html>

Explanation

document.getElementById('myElement'): Retrieves the element using its id.
myElement.addEventListener('dblclick', function() );: Attaches a dblclick event listener to the element. The second parameter is an anonymous function that gets executed when the element is double-clicked.
myElement.style.backgroundColor = 'lightgreen';: The code inside the function changes the background color of the element to light green.

03. `mousedown` and `mouseup`

The mousedown and mouseup events in JavaScript are part of the mouse events category. They are triggered when a mouse button is pressed down (mousedown) and released (mouseup) over an HTML element, respectively.

Example

Log a message when the mouse button is pressed down and when it is released:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mousedown and Mouseup Events Example</title>
  <style>
    #myButton {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <button id="myButton">Click me!</button>

  <script>
    // Get the button element by its id
    var myButton = document.getElementById('myButton');

    // Add a mousedown event listener to the button
    myButton.addEventListener('mousedown', function() {
      // This function will be called when the mouse button is pressed down
      console.log('Mouse button down!');
    });

    // Add a mouseup event listener to the button
    myButton.addEventListener('mouseup', function() {
      // This function will be called when the mouse button is released
      console.log('Mouse button up!');
    });
  </script>

</body>
</html>

Explanation

document.getElementById('myButton'): Retrieves the button element using its id.
myButton.addEventListener('mousedown', function() );: Attaches a mousedown event listener to the button. The second parameter is an anonymous function that gets executed when the mouse button is pressed down.
myButton.addEventListener('mouseup', function() );: Attaches a mouseup event listener to the button. The second parameter is an anonymous function that gets executed when the mouse button is released.
console.log('Mouse button down!'); and console.log('Mouse button up!');: The code inside these functions logs messages to the console indicating whether the mouse button is pressed down or released.

These events are useful when you want to capture specific actions related to the pressing and releasing of the mouse button.

04. `mousemove`

The mousemove event in JavaScript is part of the mouse events category. It is triggered when the mouse pointer is moved over an HTML element. The mousemove event can be used to capture and respond to the movement of the mouse, which is particularly useful for implementing interactive features on a webpage.

Example

Display the current mouse coordinates within the element as the user moves the mouse over it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mousemove Event Example</title>
  <style>
    #myElement {
      width: 300px;
      height: 150px;
      border: 2px solid #333;
      padding: 10px;
      margin: 20px;
    }
  </style>
</head>
<body>

  <div id="myElement">Move your mouse over me!</div>

  <script>
    // Get the element by its id
    var myElement = document.getElementById('myElement');

    // Add a mousemove event listener to the element
    myElement.addEventListener('mousemove', function(event) {
      // This function will be called when the mouse moves over the element
      var mouseX = event.clientX;
      var mouseY = event.clientY;

      // Update the content of the element with mouse coordinates
      myElement.innerHTML = 'Mouse Coordinates: (' + mouseX + ', ' + mouseY + ')';
    });
  </script>

</body>
</html>

Explanation

document.getElementById('myElement'): Retrieves the element using its id.
myElement.addEventListener('mousemove', function(event) );: Attaches a mousemove event listener to the element. The second parameter is an anonymous function that gets executed when the mouse moves over the element.
var mouseX = event.clientX; and var mouseY = event.clientY;: These lines retrieve the X and Y coordinates of the mouse pointer within the viewport.
myElement.innerHTML = 'Mouse Coordinates: (' + mouseX + ', ' + mouseY + ')';: This line updates the content of the element with the current mouse coordinates.

The mousemove event is commonly used in applications that require tracking the mouse position, implementing drag-and-drop functionality, or creating interactive elements based on mouse movements.

05. `mouseenter` and `mouseleave`

The mouseenter and mouseleave events in JavaScript are part of the mouse events category and are related to the mouse pointer entering and leaving an HTML element, respectively.

Example

Change background color when the mouse enters and leaves the element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mouseenter and Mouseleave Events Example</title>
  <style>
    #myElement {
      width: 300px;
      height: 150px;
      border: 2px solid #333;
      padding: 10px;
      margin: 20px;
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <div id="myElement">Hover over me!</div>

  <script>
    // Get the element by its id
    var myElement = document.getElementById('myElement');

    // Add a mouseenter event listener to the element
    myElement.addEventListener('mouseenter', function() {
      // This function will be called when the mouse enters the element
      myElement.style.backgroundColor = 'lightblue';
    });

    // Add a mouseleave event listener to the element
    myElement.addEventListener('mouseleave', function() {
      // This function will be called when the mouse leaves the element
      myElement.style.backgroundColor = ''; // Reset to the default background color
    });
  </script>

</body>
</html>

Explanation

document.getElementById('myElement'): Retrieves the element using its id.
myElement.addEventListener('mouseenter', function() );: Attaches a mouseenter event listener to the element. The second parameter is an anonymous function that gets executed when the mouse enters the element.
myElement.addEventListener('mouseleave', function() );: Attaches a mouseleave event listener to the - - element. The second parameter is an anonymous function that gets executed when the mouse leaves the element.
myElement.style.backgroundColor = 'lightblue'; and myElement.style.backgroundColor = '';: These lines change the background color of the element when the mouse enters and leaves, respectively.

06. `mouseover` and `mouseout`

The mouseover and mouseout events in JavaScript are part of the mouse events category and are related to the mouse pointer entering and leaving an HTML element, similar to mouseenter and mouseleave.

Let's consider an example similar to the previous one, where you have a div element, and you want to change its background color when the mouse enters and leaves the element. The difference here is that mouseover and mouseout events are used instead -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mouseover and Mouseout Events Example</title>
  <style>
    #myElement {
      width: 300px;
      height: 150px;
      border: 2px solid #333;
      padding: 10px;
      margin: 20px;
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <div id="myElement">Hover over me!</div>

  <script>
    // Get the element by its id
    var myElement = document.getElementById('myElement');

    // Add a mouseover event listener to the element
    myElement.addEventListener('mouseover', function() {
      // This function will be called when the mouse enters the element or its descendant elements
      myElement.style.backgroundColor = 'lightblue';
    });

    // Add a mouseout event listener to the element
    myElement.addEventListener('mouseout', function() {
      // This function will be called when the mouse leaves the element or its descendant elements
      myElement.style.backgroundColor = ''; // Reset to the default background color
    });
  </script>

</body>
</html>

Important Points:

Unlike mouseenter and mouseleave, mouseover and mouseout events propagate through descendant elements. This means that if the mouse enters or leaves a child element of the specified element, the event will still be triggered.

Keyboard Events

01. `keydown` and `keyup`

The keydown and keyup events in JavaScript are part of the keyboard events category. They are triggered when a key on the keyboard is pressed down (keydown) and released (keyup), respectively. These events are commonly used to capture user input from the keyboard and respond to specific key actions.

The keydown event is triggered when a key on the keyboard is pressed down.

The keyup event is triggered when a key on the keyboard is released after being pressed down.

Example

Let's consider an example where you have an input field, and you want to log the key code and the corresponding key name when a key is pressed down and released.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Keydown and Keyup Events Example</title>
</head>
<body>

  <input type="text" id="myInput" placeholder="Press a key"/>

  <script>
    // Get the input element by its id
    var myInput = document.getElementById('myInput');

    // Add a keydown event listener to the input field
    myInput.addEventListener('keydown', function(event) {
      // This function will be called when a key is pressed down
      console.log('Keydown Event: Key Code - ' + event.keyCode + ', Key - ' + event.key);
    });

    // Add a keyup event listener to the input field
    myInput.addEventListener('keyup', function(event) {
      // This function will be called when a key is released
      console.log('Keyup Event: Key Code - ' + event.keyCode + ', Key - ' + event.key);
    });

  </script>

</body>
</html>

Explanation

document.getElementById('myInput'): Retrieves the input element using its id.
myInput.addEventListener('keydown', function(event) );: Attaches a keydown event listener to the input field. The second parameter is an anonymous function that gets executed when a key is pressed down.
myInput.addEventListener('keyup', function(event) );: Attaches a keyup event listener to the input field. The second parameter is an anonymous function that gets executed when a key is released.
The console.log logs the message with information about the key code and the corresponding key name when a key is pressed down and released.

``keyCode`

The keyCode property provides a numerical code for the key, and the key property provides the actual key name (e.g., 'A', 'Enter', 'Space').

02. `keypress`

The keypress event in JavaScript is a keyboard event that occurs when a key on the keyboard is pressed down and produces a character value. Unlike the keydown and keyup events, the keypress event specifically deals with character input, and it provides information about the character that was typed.

Example

Let's consider an example where you have an input field, and you want to log the character and its corresponding key code when a key is pressed and produces a character.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Keypress Event Example</title>
</head>
<body>

  <input type="text" id="myInput" placeholder="Type something"/>

  <script>
    // Get the input element by its id
    var myInput = document.getElementById('myInput');

    // Add a keypress event listener to the input field
    myInput.addEventListener('keypress', function(event) {
      // This function will be called when a key produces a character
      console.log('Keypress Event: Character - ' + event.key + ', Key Code - ' + event.keyCode);
    });
  </script>

</body>
</html>

Explanation

myInput.addEventListener('keypress', function(event) );: Attaches a keypress event listener to the input field. The second parameter is an anonymous function that gets executed when a key is pressed and produces a character.
The console.log logs a message to the console with information about the character and the key code when a key is pressed and produces a character.
The event parameter in the event handler provides information about the event, including the character produced (event.key) and the key code (event.keyCode).

Form Events

01. `submit`

The submit event in JavaScript is associated with HTML forms. It occurs when a form is submitted, either by clicking a submit button or by calling the submit() method on the form element programmatically. This event is commonly used to perform actions such as form validation or to initiate data submission to a server.

Example

Let's consider an example where you have a simple form, and you want to prevent its default submission behavior, log a message to the console, and then perform some form validation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Submit Event Example</title>
</head>
<body>

  <form id="myForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required/>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required/>

    <button type="submit">Submit</button>
  </form>

  <script>
    // Get the form element by its id
    var myForm = document.getElementById('myForm');

    // Add a submit event listener to the form
    myForm.addEventListener('submit', function(event) {
      // Prevent the default form submission behavior
      event.preventDefault();

      // Log a message to the console
      console.log('Form submitted!');

      // Perform form validation or other actions here
    });
  </script>

</body>
</html>

Explanation

myForm.addEventListener('submit', function(event) );: Attaches a submit event listener to the form. The second parameter is an anonymous function that gets executed when the form is submitted.
event.preventDefault();: This line prevents the default form submission behavior. Without this line, the form would submit in the traditional way, triggering a page reload or navigation.
console.log('Form submitted!');: This line logs a message to the console when the form is submitted.

02. `reset`

The reset event in JavaScript is associated with HTML forms. It occurs when a form is reset, either by clicking a reset button or by calling the reset() method on the form element programmatically. This event provides an opportunity to execute custom logic when a user initiates the resetting of a form.

Example

Let's consider an example where you have a form with an input field and a reset button. The reset event is used to log a message to the console when the form is reset.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Reset Event Example</title>
</head>
<body>

  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"/>
    <button type="reset">Reset</button>
  </form>

  <script>
    // Get the form element by its id
    var myForm = document.getElementById('myForm');

    // Add a reset event listener to the form
    myForm.addEventListener('reset', function() {
      // This function will be called when the form is reset
      console.log('Form reset!');
    });
  </script>

</body>
</html>

Explanation

myForm.addEventListener('reset', function() );: Attaches a reset event listener to the form. The second parameter is an anonymous function that gets executed when the form is reset.
console.log('Form reset!');: This line logs a message to the console when the form is reset.

03. `change`

The change event in JavaScript is associated with form elements, such as input fields, checkboxes, and select elements. It is triggered when the value of an input field or the selection of an option in a dropdown (select) element has changed and loses focus. This event is particularly useful for capturing user input and responding to changes in form elements.

Example

Let's consider an example where you have a dropdown (select) element, and you want to log a message to the console when the user selects a different option.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Change Event Example</title>
</head>
<body>

  <label for="mySelect">Select a fruit:</label>
  <select id="mySelect">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </select>

  <script>
    // Get the select element by its id
    var mySelect = document.getElementById('mySelect');

    // Add a change event listener to the select element
    mySelect.addEventListener('change', function() {
      // This function will be called when the selected option changes
      console.log('Selected fruit: ' + mySelect.value);
    });
  </script>

</body>
</html>

Explanation

mySelect.addEventListener('change', function() );: Attaches a change event listener to the select element. The second parameter is an anonymous function that gets executed when the selected option changes.
console.log('Selected fruit: ' + mySelect.value);: This line logs a message to the console with information about the selected fruit when the user changes the selection.

04. `focus`

The focus event in JavaScript is associated with form elements and occurs when an element gains focus. It is triggered when a user interacts with an input field, textarea, or other focusable elements. The focus event is often used to provide visual feedback, initiate actions, or perform tasks when an element becomes the active focus.

Example

Let's consider an example where you have an input field, and you want to change its background color when the user focuses on it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Focus Event Example</title>
  <style>
    #myInput {
      padding: 10px;
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <label for="myInput">Enter your name:</label>
  <input type="text" id="myInput"/>

  <script>
    // Get the input element by its id
    var myInput = document.getElementById('myInput');

    // Add a focus event listener to the input field
    myInput.addEventListener('focus', function() {
      // This function will be called when the input field gains focus
      myInput.style.backgroundColor = 'lightyellow';
    });

    // Add a blur event listener to the input field
    myInput.addEventListener('blur', function() {
      // This function will be called when the input field loses focus
      myInput.style.backgroundColor = ''; // Reset to the default background color
    });
  </script>

</body>
</html>

Explanation

myInput.addEventListener('focus', function() );: Attaches a focus event listener to the input field. The second parameter is an anonymous function that gets executed when the input field gains focus.
myInput.addEventListener('blur', function() );: Attaches a blur event listener to the input field. The second parameter is an anonymous function that gets executed when the input field loses focus.
myInput.style.backgroundColor = 'lightyellow'; and myInput.style.backgroundColor = ''; : These lines change the background color of the input field when it gains focus and reset it when it loses focus.

05. `blur`

The blur event in JavaScript is associated with form elements and occurs when an element loses focus. It is the counterpart to the focus event and is triggered when the user navigates away from an input field, textarea, or another focusable element. The blur event is often used to validate user input, trigger actions, or perform tasks when an element is no longer the active focus.

Example

Let's consider an example where you have an input field, and you want to validate the user's input when they move away from the field (lose focus).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Blur Event Example</title>
  <style>
    #myInput {
      padding: 10px;
      transition: border-color 0.3s ease;
    }
  </style>
</head>
<body>

  <label for="myInput">Enter your email:</label>
  <input type="email" id="myInput"/>

  <script>
    // Get the input element by its id
    var myInput = document.getElementById('myInput');

    // Add a blur event listener to the input field
    myInput.addEventListener('blur', function() {
      // This function will be called when the input field loses focus

      // Validate the email format
      var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(myInput.value)) {
        // If the email is not valid, change border color to red
        myInput.style.borderColor = 'red';
      } else {
        // If the email is valid, reset border color
        myInput.style.borderColor = '';
      }
    });
  </script>

</body>
</html>

Explanation

myInput.addEventListener('blur', function() );: Attaches a blur event listener to the input field. The second parameter is an anonymous function that gets executed when the input field loses focus.
myInput.style.borderColor = 'red'; and myInput.style.borderColor = '';: These lines change the border color of the input field to red if the email is not valid and reset it if the email is valid.

Document Loading and Rendering Events

01. `load`

The load event in JavaScript is associated with the loading of external resources within a web page, such as images, scripts, stylesheets, and the entire document itself. It is triggered when a specified resource has finished loading, indicating that the content is available for manipulation or interaction. The load event is often used to execute code that relies on the completion of resource loading.

Example

Let's consider an example where you have an image, and you want to log a message to the console when the image has finished loading.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Load Event Example</title>
</head>
<body>

  <img id="myImage" src="example.jpg" alt="Example Image"/>

  <script>
    // Get the image element by its id
    var myImage = document.getElementById('myImage');

    // Add a load event listener to the image
    myImage.addEventListener('load', function() {
      // This function will be called when the image has finished loading
      console.log('Image loaded successfully!');
      // You can perform additional actions or manipulations here
    });
  </script>

</body>
</html>

Explanation

myImage.addEventListener('load', function() );: Attaches a load event listener to the image. The second parameter is an anonymous function that gets executed when the image has finished loading.
console.log('Image loaded successfully!');: This line logs a message to the console when the image has finished loading.

02. `unload`

The unload event in JavaScript is associated with the unloading of a document or the closing of a browser window. It is triggered when a user navigates away from a page or closes the browser tab or window. The unload event provides an opportunity to perform cleanup tasks, save user data, or execute specific actions before the user leaves the page.

Example

Let's consider an example where you want to display a confirmation message to the user before they leave the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Unload Event Example</title>
</head>
<body>

  <p>This is a simple web page.</p>

  <script>
    // Add an unload event listener to the window
    window.addEventListener('unload', function(event) {
      // This function will be called when the document is being unloaded

      // Display a confirmation message
      var confirmationMessage = 'Are you sure you want to leave?';
      event.returnValue = confirmationMessage; // Standard for most browsers
      return confirmationMessage; // For some older browsers
    });
  </script>

</body>
</html>

Explanation

window.addEventListener('unload', function(event) );: Attaches an unload event listener to the window object. The second parameter is an anonymous function that gets executed when the document is being unloaded.
var confirmationMessage = 'Are you sure you want to leave?';: Creates a confirmation message.
event.returnValue = confirmationMessage; and return confirmationMessage;: These lines set the returnValue property of the event object to the confirmation message. This is a standard approach for most browsers. The return statement is used for some older browsers.

Some modern browsers may restrict certain actions within the unload event for security reasons. Actions like opening new tabs or windows, showing alerts, and performing synchronous AJAX requests may be limited.

03. `DOMContentLoaded`

The DOMContentLoaded event in JavaScript is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and other external resources to finish loading.

This event is particularly useful for executing code that depends on the structure of the HTML document without delaying the rendering of the page.

Example

Let's consider an example where you want to manipulate the DOM once it has been fully loaded.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>DOMContentLoaded Event Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>

  <h1 id="pageTitle">Welcome!</h1>
  <p id="pageContent">This is a simple web page.</p>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // This function will be called when the DOM is fully loaded

      // Manipulate the DOM
      var pageTitle = document.getElementById('pageTitle');
      pageTitle.textContent = 'Dynamic Content';

      var pageContent = document.getElementById('pageContent');
      pageContent.innerHTML = 'This content has been dynamically changed!';
    });
  </script>

</body>
</html>

Explanation

document.addEventListener('DOMContentLoaded', function() );:
Attaches a DOMContentLoaded event listener to the document object. The second parameter is an anonymous function that gets executed when the DOM is fully loaded.
The function inside the event listener manipulates the DOM by changing the text content of the heading and paragraph elements.

Window Events

01. `resize`

The resize event in JavaScript is triggered when the size of the browser window is changed. This event provides an opportunity to execute code or perform actions in response to changes in the dimensions of the viewport.

It's commonly used to create responsive designs or update elements dynamically based on the window size.

Explanation

Let's consider an example where you want to log the width and height of the window to the console whenever the user resizes it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Resize Event Example</title>
</head>
<body>

  <script>
    window.addEventListener('resize', function() {
      // This function will be called when the window is resized

      // Log the width and height of the window to the console
      console.log('Window width: ' + window.innerWidth);
      console.log('Window height: ' + window.innerHeight);
    });
  </script>

</body>
</html>

Explanation

window.addEventListener('resize', function() );: Attaches a resize event listener to the window object. The second parameter is an anonymous function that gets executed when the window is resized.
console.log('Window width: ' + window.innerWidth); and console.log('Window height: ' + window.innerHeight);: These lines log the width and height of the window to the console when the resize event occurs.

02. `scroll`

The scroll event in JavaScript is triggered when a user scrolls through a webpage, either vertically or horizontally. This event is commonly used to create effects, animations, or execute code based on the user's scrolling behavior.

It provides information about the scroll position, which can be used to implement various features, such as sticky navigation bars, parallax effects, or lazy loading of content.

Example

Let's consider an example where you want to change the background color of the navigation bar when the user scrolls down the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Scroll Event Example</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 2000px; /* Adding some height for scrolling */
    }

    #navbar {
      background-color: #f0f0f0;
      padding: 10px;
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <div id="navbar">
    <p>Navigation Bar</p>
  </div>

  <script>
    var navbar = document.getElementById('navbar');

    window.addEventListener('scroll', function() {
      // This function will be called when the user scrolls

      // Change the background color of the navigation bar based on scroll position
      if (window.scrollY > 100) {
        navbar.style.backgroundColor = '#333';
      } else {
        navbar.style.backgroundColor = '#f0f0f0';
      }
    });
  </script>

</body>
</html>

Explanation

window.addEventListener('scroll', function() );: Attaches a scroll event listener to the window object. The second parameter is an anonymous function that gets executed when the user scrolls.
if (window.scrollY > 100) and else : This conditional statement changes the background color of the navigation bar based on the scroll position. If the user has scrolled more than 100 pixels down, the color is changed; otherwise, it's set back to the initial color.

Touch Events

01. `touchstart`

The touchstart event in JavaScript is part of the Touch Events API and is triggered when a user's touch point is placed on the touch surface.

This event marks the beginning of a touch interaction and is commonly used to initiate actions, track touch movements, and create touch-based interfaces for mobile and touch-enabled devices.

Example

Let's consider a simple example where you want to change the color of an element when a user starts touching it on a touch-enabled device.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>touchstart Event Example</title>
  <style>
    #touchElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <div id="touchElement"></div>

  <script>
    var touchElement = document.getElementById('touchElement');

    touchElement.addEventListener('touchstart', function(event) {
      // This function will be called when a touch starts on the element

      // Change the background color on touch start
      touchElement.style.backgroundColor = 'orange';

      // Prevent default touch behavior (optional)
      event.preventDefault();
    });
  </script>

</body>
</html>

Explanation

touchElement.addEventListener('touchstart', function(event) );: Attaches a touchstart event listener to the touchable element. The second parameter is an anonymous function that gets executed when a touch starts on the element.
touchElement.style.backgroundColor = 'orange';: This line changes the background color of the element when a touch starts.
event.preventDefault();: This line prevents the default touch behavior, which can be useful in scenarios where you want to handle touch events manually.

02. `touchend`

The touchend event in JavaScript is part of the Touch Events API and is triggered when a user removes their touch point from the touch surface.

This event marks the end of a touch interaction and is commonly used to finalize actions, calculate touch duration, and create touch-based interfaces for mobile and touch-enabled devices.

Example

Let's extend the previous example to change the color of an element when a user stops touching it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>touchend Event Example</title>
  <style>
    #touchElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transition: background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <div id="touchElement"></div>

  <script>
    var touchElement = document.getElementById('touchElement');

    touchElement.addEventListener('touchstart', function() {
      // Change the background color on touch start
      touchElement.style.backgroundColor = 'orange';
    });

    touchElement.addEventListener('touchend', function() {
      // Change the background color on touch end
      touchElement.style.backgroundColor = 'lightblue';
    });
  </script>

</body>
</html>

Explanation

touchElement.addEventListener('touchstart', function() );: Attaches a touchstart event listener to the touchable element. The function changes the background color when a touch starts.
touchElement.addEventListener('touchend', function() );: Attaches a touchend event listener to the touchable element. The function changes the background color when a touch ends.

03. `touchmove`

The touchmove event in JavaScript is part of the Touch Events API and is triggered when a user moves their touch point across the touch surface.

This event provides information about the movement of the touch, such as the coordinates of the touch position, and is commonly used to track and respond to touch gestures, implement swipe functionality, or create touch-based interfaces for mobile and touch-enabled devices.

Example

Let's consider an example where you want to update the position of an element based on the user's touch movement.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>touchmove Event Example</title>
  <style>
    #movableElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.3s ease;
    }
  </style>
</head>
<body>

  <div id="movableElement"></div>

  <script>
    var movableElement = document.getElementById('movableElement');
    var initialX, initialY;

    movableElement.addEventListener('touchstart', function(event) {
      // Save the initial touch coordinates
      initialX = event.touches[0].clientX;
      initialY = event.touches[0].clientY;
    });

    movableElement.addEventListener('touchmove', function(event) {
      // Calculate the change in touch coordinates
      var deltaX = event.touches[0].clientX - initialX;
      var deltaY = event.touches[0].clientY - initialY;

      // Update the element's position
      movableElement.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
    });
  </script>

</body>
</html>

Explanation

movableElement.addEventListener('touchstart', function(event) );: Attaches a touchstart event listener to the movable element. The function saves the initial touch coordinates.
movableElement.addEventListener('touchmove', function(event) );: Attaches a touchmove event listener to the movable element. The function calculates the change in touch coordinates and updates the element's position.

The touches property of the event object provides an array of touch points, and clientX and clientY represent the coordinates of the touch point relative to the viewport.

Drag and Drop Events

01. `dragstart`

The dragstart event in JavaScript is part of the Drag and Drop API. It is triggered when a draggable element starts being dragged. This event provides an opportunity to customize the drag-and-drop behavior by setting data and appearance during the drag operation.

Example

Let's consider a basic example where you want to drag an image and log a message when the drag starts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>dragstart Event Example</title>
  <style>
    #draggableImage {
      width: 150px;
      cursor: grab;
    }
  </style>
</head>
<body>

  <img id="draggableImage" src="example.jpg" alt="Draggable Image"/>

  <script>
    var draggableImage = document.getElementById('draggableImage');

    draggableImage.addEventListener('dragstart', function(event) {
      // This function will be called when the drag starts

      // Set the drag data (required for the drag to work)
      event.dataTransfer.setData('text/plain', 'Drag me!');

      // Log a message
      console.log('Drag started!');
    });
  </script>

</body>
</html>

Explanation

draggableImage.addEventListener('dragstart', function(event) );: Attaches a dragstart event listener to the draggable image. The function is executed when the drag starts.
event.dataTransfer.setData('text/plain', 'Drag me!');: Sets the drag data. This is required for the drag-and-drop operation to work. The first parameter is the data type ('text/plain' in this case), and the second parameter is the actual data being transferred.
console.log('Drag started!');: Logs a message to the console when the drag starts.

The dataTransfer property of the event object is used to set the data that will be transferred during the drag-and-drop operation.

For the drag-and-drop operation to work, the element needs to have the draggable attribute set to true.

02. `dragend`

The dragend event in JavaScript is part of the Drag and Drop API. It is triggered when a drag operation is being ended, either because the dragged element was dropped or the drag was canceled. This event provides an opportunity to perform cleanup or additional actions after the drag operation has concluded.

Example

Let's extend the previous example to include a dragend event handler that logs a message when the drag ends.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>dragend Event Example</title>
  <style>
    #draggableImage {
      width: 150px;
      cursor: grab;
    }
  </style>
</head>
<body>

  <img id="draggableImage" src="example.jpg" alt="Draggable Image"/>

  <script>
    var draggableImage = document.getElementById('draggableImage');

    draggableImage.addEventListener('dragstart', function(event) {
      // Set the drag data
      event.dataTransfer.setData('text/plain', 'Drag me!');
    });

    draggableImage.addEventListener('dragend', function() {
      // This function will be called when the drag ends (after drop or cancel)
      console.log('Drag ended!');
    });
  </script>

</body>
</html>

Explanation

draggableImage.addEventListener('dragstart', function(event) );: Attaches a dragstart event listener to the draggable image. The function sets the drag data.
draggableImage.addEventListener('dragend', function() );: Attaches a dragend event listener to the draggable image. The function is executed when the drag ends, whether after a successful drop or if the drag is canceled.
console.log('Drag ended!');: Logs a message to the console when the drag ends.

The dragend event is not only triggered after a successful drop but also if the drag operation is canceled (for example, if the user presses the Escape key).

03. `dragenter`

The dragenter event in JavaScript is part of the Drag and Drop API. It is triggered when a dragged element or text selection enters a valid drop target, such as a drop zone or another draggable element.

This event provides an opportunity to customize the appearance of the drop target or perform other actions when an item is being dragged over it.

Example

Let's consider a simple example where you have a drop zone that changes its background color when a draggable element enters it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>dragenter Event Example</title>
  <style>
    #dropZone {
      width: 200px;
      height: 200px;
      border: 2px dashed #aaa;
    }

    #draggableElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

  <div id="dropZone"></div>
  <div id="draggableElement" draggable="true">Drag me!</div>

  <script>
    var dropZone = document.getElementById('dropZone');
    var draggableElement = document.getElementById('draggableElement');

    dropZone.addEventListener('dragenter', function() {
      // This function will be called when the draggable element enters the drop zone

      // Change the background color of the drop zone
      dropZone.style.backgroundColor = 'lightgreen';
    });

    dropZone.addEventListener('dragleave', function() {
      // This function will be called when the draggable element leaves the drop zone

      // Reset the background color of the drop zone
      dropZone.style.backgroundColor = '';
    });
  </script>

</body>
</html>

Explanation

dropZone.addEventListener('dragenter', function() );: Attaches a dragenter event listener to the drop zone. The function is executed when the draggable element enters the drop zone.
dropZone.addEventListener('dragleave', function() );: Attaches a dragleave event listener to the drop zone. The function is executed when the draggable element leaves the drop zone.
**dropZone.style.backgroundColor = 'lightgreen';` and dropZone.style.backgroundColor = '';: These lines change and reset the background color of the drop zone when the draggable element enters and leaves, respectively.

The dragenter event is part of a sequence of events during drag and drop, and it works in conjunction with other events like dragover, dragleave, and drop.

04. `dragleave`

The dragleave event in JavaScript is part of the Drag and Drop API. It is triggered when a dragged element or text selection leaves a valid drop target, such as a drop zone or another draggable element.

This event provides an opportunity to customize the appearance of the drop target or perform other actions when an item is no longer being dragged over it.

Example

Let's extend the previous example with a dragleave event handler that resets the background color of the drop zone when the draggable element leaves it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>dragleave Event Example</title>
  <style>
    #dropZone {
      width: 200px;
      height: 200px;
      border: 2px dashed #aaa;
    }

    #draggableElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

  <div id="dropZone"></div>
  <div id="draggableElement" draggable="true">Drag me!</div>

  <script>
    var dropZone = document.getElementById('dropZone');
    var draggableElement = document.getElementById('draggableElement');

    dropZone.addEventListener('dragenter', function() {
      // Change the background color of the drop zone when the draggable element enters
      dropZone.style.backgroundColor = 'lightgreen';
    });

    dropZone.addEventListener('dragleave', function() {
      // Reset the background color of the drop zone when the draggable element leaves
      dropZone.style.backgroundColor = '';
    });
  </script>

</body>
</html>

You now already know the explanation of above code because we use the dragleave in other examples also.

05. `dragover`

The dragover event in JavaScript is part of the Drag and Drop API. It is triggered when a dragged element or text selection is being dragged over a valid drop target, such as a drop zone or another draggable element.

This event provides an opportunity to customize the appearance of the drop target or perform other actions while the item is being dragged over it.

Example

Let's consider a simple example where you have a drop zone, and you want to prevent the default behavior (which is to not allow dropping) and update the appearance of the drop zone while the draggable element is being dragged over it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>dragover Event Example</title>
  <style>
    #dropZone {
      width: 200px;
      height: 200px;
      border: 2px dashed #aaa;
    }

    #draggableElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

  <div id="dropZone"></div>
  <div id="draggableElement" draggable="true">Drag me!</div>

  <script>
    var dropZone = document.getElementById('dropZone');
    var draggableElement = document.getElementById('draggableElement');

    dropZone.addEventListener('dragover', function(event) {
      // Prevent the default behavior (allow dropping)
      event.preventDefault();

      // Change the appearance of the drop zone while dragging over it
      dropZone.style.backgroundColor = 'lightgreen';
    });

    dropZone.addEventListener('dragleave', function() {
      // Reset the background color of the drop zone when the draggable element leaves
      dropZone.style.backgroundColor = '';
    });

    dropZone.addEventListener('drop', function() {
      // Reset the background color of the drop zone when the draggable element is dropped
      dropZone.style.backgroundColor = '';
    });
  </script>

</body>
</html>

As I said in previous example, you already know the explanation, so there is also no need to explain this.

06. `drop`

The drop event in JavaScript is part of the Drag and Drop API. It is triggered when a dragged element or text selection is dropped onto a valid drop target, such as a drop zone or another draggable element. This event provides an opportunity to handle the drop action and perform actions based on the dropped item.

Example

Let's consider a simple example where you have a drop zone, and you want to prevent the default behavior (which is to open the dropped content as a link) and log a message when the draggable element is dropped onto the drop zone.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>drop Event Example</title>
  <style>
    #dropZone {
      width: 200px;
      height: 200px;
      border: 2px dashed #aaa;
    }

    #draggableElement {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

  <div id="dropZone"></div>
  <div id="draggableElement" draggable="true">Drag me!</div>

  <script>
    var dropZone = document.getElementById('dropZone');
    var draggableElement = document.getElementById('draggableElement');

    dropZone.addEventListener('dragover', function(event) {
      // Prevent the default behavior (allow dropping)
      event.preventDefault();

      // Change the appearance of the drop zone while dragging over it
      dropZone.style.backgroundColor = 'lightgreen';
    });

    dropZone.addEventListener('dragleave', function() {
      // Reset the background color of the drop zone when the draggable element leaves
      dropZone.style.backgroundColor = '';
    });

    dropZone.addEventListener('drop', function() {
      // Prevent the default behavior (open the dropped content as a link)
      event.preventDefault();

      // Reset the background color of the drop zone when the draggable element is dropped
      dropZone.style.backgroundColor = '';

      // Log a message when the draggable element is dropped
      console.log('Element dropped onto the drop zone!');
    });
  </script>

</body>
</html>

No need to explain the code because you already know it!

Media Events

01. `play`

The play event in JavaScript is associated with media elements, such as <audio> and <video> elements. It is triggered when playback begins on a media element. This event can be useful for implementing functionality or updates related to the start of media playback.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>play Event Example</title>
</head>
<body>

  <video controls>
    <source src="example.mp4" type="video/mp4"/>
    Your browser does not support the video tag.
  </video>

  <script>
    var videoElement = document.querySelector('video');

    videoElement.addEventListener('play', function() {
      // This function will be called when the video playback starts
      console.log('Video playback started!');
    });
  </script>

</body>
</html>

Explanation

videoElement.addEventListener('play', function() );: Attaches a play event listener to the video element. The function is executed when the video playback starts.
console.log('Video playback started!');: Logs a message to the console when the play event is triggered.

The play event is part of a set of media events, including pause, ended, timeupdate, and others, that allow you to respond to various aspects of media playback.

02. `pause`

The pause event in JavaScript is associated with media elements, such as <audio> and <video> elements. It is triggered when playback is paused on a media element. This event can be useful for implementing functionality or updates related to the pause state of media playback.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>pause Event Example</title>
</head>
<body>

  <video controls>
    <source src="example.mp4" type="video/mp4"/>
    Your browser does not support the video tag.
  </video>

  <script>
    var videoElement = document.querySelector('video');

    videoElement.addEventListener('pause', function() {
      // This function will be called when the video playback is paused
      console.log('Video playback paused!');
    });
  </script>

</body>
</html>

Now you know the explanation because of play event example.

03. `ended`

The ended event in JavaScript is associated with media elements, such as <audio> and <video> elements. It is triggered when playback of a media element reaches the end, indicating that the media has finished playing. This event is useful for implementing functionality or updates related to the completion of media playback.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>ended Event Example</title>
</head>
<body>

  <video controls>
    <source src="example.mp4" type="video/mp4"/>
    Your browser does not support the video tag.
  </video>

  <script>
    var videoElement = document.querySelector('video');

    videoElement.addEventListener('ended', function() {
      // This function will be called when the video playback reaches its end
      console.log('Video playback ended!');
    });
  </script>

</body>
</html>

You know the explanation of this above code.

04. `timeupdate`

The timeupdate event in JavaScript is associated with media elements, such as <audio> and <video> elements. It is triggered periodically as the playback position of the media changes. This event is commonly used to update UI elements, such as a progress bar, to reflect the current playback position of the media.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>timeupdate Event Example</title>
  <style>
    #progressBar {
      width: 100%;
      height: 20px;
      background-color: #eee;
      margin-top: 10px;
    }

    #progressIndicator {
      height: 100%;
      background-color: #4caf50;
    }
  </style>
</head>
<body>

  <video controls>
    <source src="example.mp4" type="video/mp4"/>
    Your browser does not support the video tag.
  </video>

  <div id="progressBar">
    <div id="progressIndicator"></div>
  </div>

  <script>
    var videoElement = document.querySelector('video');
    var progressBar = document.getElementById('progressIndicator');

    videoElement.addEventListener('timeupdate', function() {
      // This function will be called periodically as the playback position changes
      var currentTime = videoElement.currentTime;
      var duration = videoElement.duration;

      // Update the progress bar based on the current playback position
      var progress = (currentTime / duration) * 100;
      progressBar.style.width = progress + '%';
    });
  </script>

</body>
</html>

Explanation

videoElement.addEventListener('timeupdate', function() );: Attaches a timeupdate event listener to the video element. The function is executed periodically as the playback position changes.
var currentTime = videoElement.currentTime; and **var duration = videoElement.duration;`: Retrieves the current playback time and total duration of the video.
**var progress = (currentTime / duration) * 100;`: Calculates the progress percentage based on the current playback time and total duration.
**progressBar.style.width = progress + '%';`: Updates the width of the progress indicator to reflect the current progress.

Clipboard Events

01. `cut`

The cut event in JavaScript is triggered when the user cuts (removes) selected content from an editable element. This event is commonly associated with text input fields and text areas where users can select text and use the cut operation to remove it.

The cut event provides an opportunity to respond to the cutting action, allowing you to perform additional tasks or validations.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>cut Event Example</title>
</head>
<body>

  <textarea id="editableTextarea" placeholder="Try cutting text here..."></textarea>

  <script>
    var textarea = document.getElementById('editableTextarea');

    textarea.addEventListener('cut', function(event) {
      // This function will be called when the user cuts text
      console.log('Text cut:', event.clipboardData.getData('text'));
    });
  </script>

</body>
</html>

Explanation

textarea.addEventListener('cut', function(event) );: Attaches a cut event listener to the textarea. The function is executed when the user cuts text.
console.log('Text cut:', event.clipboardData.getData('text'));: Logs a message to the console indicating that text has been cut. It also retrieves the cut text using event.clipboardData.getData('text').

02. `copy`

The copy event in JavaScript is triggered when the user copies content from an editable element. This event is commonly associated with text input fields and text areas where users can select text and use the copy operation to duplicate it.

The copy event provides an opportunity to respond to the copying action, allowing you to perform additional tasks or validations.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>copy Event Example</title>
</head>
<body>

  <textarea id="editableTextarea" placeholder="Try copying text here..."></textarea>

  <script>
    var textarea = document.getElementById('editableTextarea');

    textarea.addEventListener('copy', function(event) {
      // This function will be called when the user copies text
      console.log('Text copied:', event.clipboardData.getData('text'));
    });
  </script>

</body>
</html>

You know its explanation already because of the cut event example.

The event.clipboardData.getData('text') part is used to retrieve the copied text from the clipboard. This is useful for obtaining the content that was copied.

03. `paste`

The paste event in JavaScript is triggered when the user pastes content into an editable element. This event is commonly associated with text input fields and text areas where users can paste text from the clipboard.

The paste event provides an opportunity to respond to the pasting action, allowing you to perform additional tasks or validations.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>paste Event Example</title>
</head>
<body>

  <textarea id="editableTextarea" placeholder="Try pasting text here..."></textarea>

  <script>
    var textarea = document.getElementById('editableTextarea');

    textarea.addEventListener('paste', function(event) {
      // This function will be called when the user pastes text
      console.log('Text pasted:', event.clipboardData.getData('text'));
    });
  </script>

</body>
</html>

Network Events

01. `online`

The online event in JavaScript is part of the Navigator interface and is triggered when the browser's internet connection is restored after being offline. It provides a way for web applications to respond to changes in network connectivity.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>online Event Example</title>
</head>
<body>

  <p id="status">Status: Online</p>

  <script>
    window.addEventListener('online', function() {
      // This function will be called when the browser is online
      document.getElementById('status').innerText = 'Status: Online';
    });

    window.addEventListener('offline', function() {
      // This function will be called when the browser is offline
      document.getElementById('status').innerText = 'Status: Offline';
    });
  </script>

</body>
</html>

Explanation

**document.getElementById('status').innerText = 'Status: Online';`: Updates the content of the "status" element to indicate that the browser is online.
**window.addEventListener('offline', function() );: Attaches an offline` event listener to the window object. The function is executed when the browser goes offline.
document.getElementById('status').innerText = 'Status: Offline';: Updates the content of the "status" element to indicate that the browser is offline.

02. `offline`

The offline event in JavaScript is part of the Navigator interface and is triggered when the browser loses its internet connection. It provides a way for web applications to respond to changes in network connectivity.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>offline Event Example</title>
</head>
<body>

  <p id="status">Status: Online</p>

  <script>
    window.addEventListener('online', function() {
      // This function will be called when the browser is online
      document.getElementById('status').innerText = 'Status: Online';
    });

    window.addEventListener('offline', function() {
      // This function will be called when the browser is offline
      document.getElementById('status').innerText = 'Status: Offline';
    });
  </script>

</body>
</html>

Miscellaneous Events

01. `hashchange`

The hashchange event in JavaScript is triggered when the fragment identifier (hash) of the URL changes. The fragment identifier is the part of the URL that comes after the '#' symbol. This event is particularly useful for single-page applications (SPAs) and other scenarios where the content of a page can change dynamically without triggering a full page reload.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>hashchange Event Example</title>
</head>
<body>

  <p id="hashValue">Current Hash: #</p>

  <script>
    window.addEventListener('hashchange', function() {
      // This function will be called when the hash changes
      document.getElementById('hashValue').innerText = 'Current Hash: ' + window.location.hash;
    });
  </script>

</body>
</html>

Explanation

window.addEventListener('hashchange', function() );: Attaches a hashchange event listener to the window object. The function is executed when the hash of the URL changes.
document.getElementById('hashValue').innerText = 'Current Hash: ' + window.location.hash;: Updates the content of the "hashValue" element to display the current hash value.

The window.location.hash property can be used to get the current hash value. The hashchange event is not triggered if you programmatically change the hash using JavaScript. It's specifically designed to respond to changes made by the user or as a result of navigating back and forth in the browser history.

02. `error`

The error event in JavaScript is a generic event that is triggered when an error occurs. This event is not limited to a specific context and can occur in various scenarios, such as during the loading of external resources like images, scripts, or stylesheets, as well as during the execution of JavaScript code. It provides a way to handle and respond to errors that may arise in the course of a web application's operation.

Example

Here's a basic example demonstrating the use of the error event with an image:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>error Event Example</title>
</head>
<body>

  <img src="nonexistent-image.jpg" alt="Sample Image" id="sampleImage" />

  <script>
    var sampleImage = document.getElementById('sampleImage');

    sampleImage.addEventListener('error', function() {
      // This function will be called when the image fails to load
      console.log('Error loading image');
    });
  </script>

</body>
</html>

Explanation

sampleImage.addEventListener('error', function() );: Attaches an error event listener to the image element. The function is executed when the image fails to load.
console.log('Error loading image');: Logs a message to the console when the error event is triggered.

The error event is not limited to images; it can be used with various elements and situations where errors may occur. For example, it can be used with the <script> element to handle script loading errors.

Custom Events

01. `CustomEvent`

In JavaScript, the CustomEvent is a constructor for creating custom events that can be used to facilitate communication between different parts of a web application. Unlike standard events like click or change, custom events allow developers to define their own event types with custom data.

Creating a CustomEvent

To create a CustomEvent, you can use the following syntax:

var myEvent = new CustomEvent('eventName', {
  detail: { key1: 'value1', key2: 'value2' },
  bubbles: true,  // Optional: Specifies whether the event should bubble up through the DOM hierarchy
  cancelable: true  // Optional: Specifies whether the event is cancelable
});

// Dispatch the custom event
element.dispatchEvent(myEvent);

Parameters:

Event Name ('eventName'): A string that represents the name of the custom event.

**Options Object** ({ detail, bubbles, cancelable })

detail (optional): A property that can be used to pass custom data along with the event. It can be accessed later using event.detail in event listeners.
bubbles (optional): A boolean indicating whether the event should bubble up through the DOM hierarchy. Default is false.
cancelable (optional): A boolean indicating whether the event is cancelable. Default is false.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CustomEvent Example</title>
</head>
<body>

  <button id="myButton">Click me</button>

  <script>
    var myButton = document.getElementById('myButton');

    myButton.addEventListener('customClick', function(event) {
      // This function will be called when the custom event is triggered
      console.log('Custom event triggered with detail:', event.detail);
    });

    function triggerCustomEvent() {
      var customEvent = new CustomEvent('customClick', {
        detail: { message: 'Hello from custom event!' }
      });

      myButton.dispatchEvent(customEvent);
    }

    // Trigger the custom event when the button is clicked
    myButton.addEventListener('click', triggerCustomEvent);
  </script>

</body>
</html>

myButton.addEventListener('customClick', function(event) { /* code */ });: Attaches a custom event listener to the button. The function is executed when the custom event with the name 'customClick' is triggered.
var customEvent = new CustomEvent('customClick', { detail: { message: 'Hello from custom event!' } });: Creates a new custom event named 'customClick' with custom data in the detail property.
myButton.dispatchEvent(customEvent);: Dispatches the custom event on the button, triggering the custom event listener.
myButton.addEventListener('click', triggerCustomEvent);: Attaches a click event listener to the button. When the button is clicked, it triggers the triggerCustomEvent function, which, in turn, dispatches the custom event.

Thank You For Reading | Share This Article Also

Share this article:

Facebook Twitter LinkedIn Instagram

Introduction to JavaScript Events

Let's break down how JavaScript events work

Here's how the magic unfolds:

Example: Button Click

Mouse Events

01. click

Example

Explanation

Key Points:

02. dblclick

Example

Explanation

03. mousedown and mouseup

Example

Explanation

04. mousemove

Example

Explanation

05. mouseenter and mouseleave

Example

Explanation

06. mouseover and mouseout

Important Points:

Keyboard Events

01. keydown and keyup

Example

Explanation

``keyCode`

02. keypress

Example

Explanation

Form Events

01. submit

Example

Explanation

02. reset

Example

Explanation

03. change

Example

Explanation

04. focus

Example

Explanation

05. blur

Example

Explanation

Document Loading and Rendering Events

01. load

Example

Explanation

02. unload

Example

Explanation

03. DOMContentLoaded

Example

Explanation

Window Events

01. resize

Explanation

Explanation

02. scroll

Example

Explanation

Touch Events

01. touchstart

Example

Explanation

02. touchend

Example

Explanation

03. touchmove

Example

Explanation

Drag and Drop Events

01. dragstart

Example

Explanation

02. dragend

Example

01. `click`

02. `dblclick`

03. `mousedown` and `mouseup`

04. `mousemove`

05. `mouseenter` and `mouseleave`

06. `mouseover` and `mouseout`

01. `keydown` and `keyup`

02. `keypress`

01. `submit`

02. `reset`

03. `change`

04. `focus`

05. `blur`

01. `load`

02. `unload`

03. `DOMContentLoaded`

01. `resize`

02. `scroll`

01. `touchstart`

02. `touchend`

03. `touchmove`

01. `dragstart`

02. `dragend`

03. `dragenter`

04. `dragleave`

05. `dragover`

06. `drop`

01. `play`

02. `pause`

03. `ended`

04. `timeupdate`

01. `cut`

02. `copy`

03. `paste`

01. `online`

02. `offline`

01. `hashchange`

02. `error`

01. `CustomEvent`