JavaScript events list

JavaScript provides a wide range of events that can be triggered in response to different actions or occurrences on a webpage. Here is a list of commonly used JavaScript events:

Mouse Events:
- click: Triggered when the mouse button is clicked.
- dblclick: Triggered when the mouse button is double-clicked.
- mouseenter: Triggered when the mouse pointer enters an element.
- mouseleave: Triggered when the mouse pointer leaves an element.
- mouseover: Triggered when the mouse pointer is moved over an element.
- mouseout: Triggered when the mouse pointer is moved out of an element.
- mousedown: Triggered when the mouse button is pressed down.
- mouseup: Triggered when the mouse button is released.
Keyboard Events:
- keydown: Triggered when a key on the keyboard is pressed down.
- keyup: Triggered when a key on the keyboard is released.
- keypress: Triggered when a key on the keyboard is pressed and released.
Form Events:
- submit: Triggered when a form is submitted.
- focus: Triggered when an element receives focus.
- blur: Triggered when an element loses focus.
- change: Triggered when the value of an input element is changed.
- input: Triggered when the content of an input element is changed.
Window Events:
- load: Triggered when the webpage finishes loading.
- resize: Triggered when the browser window is resized.
- scroll: Triggered when the user scrolls the webpage.
Touch Events (for mobile devices):
- touchstart: Triggered when a touch point is placed on the touch surface.
- touchend: Triggered when a touch point is removed from the touch surface.
- touchmove: Triggered when a touch point is moved along the touch surface.
- touchcancel: Triggered when a touch event is canceled.
Media Events:
- play: Triggered when a media element starts playing.
- pause: Triggered when a media element is paused.
- ended: Triggered when a media element has reached the end.

JavaScript events list example

Simple example code that combines multiple JavaScript events into a single code snippet:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Event Handling Example</title>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var myButton = document.getElementById("myButton");
      var myElement = document.getElementById("myElement");
      var myForm = document.getElementById("myForm");
      var myAudio = document.getElementById("myAudio");

      myButton.addEventListener("click", function() {
        // Code to be executed when the button is clicked
        alert("Button clicked!");
      });

      myElement.addEventListener("mouseover", function() {
        // Code to be executed when the mouse pointer is moved over the element
        myElement.style.backgroundColor = "yellow";
      });

      document.addEventListener("keypress", function(event) {
        // Code to be executed when a key is pressed
        var key = event.key;
        console.log("Key pressed: " + key);
      });

      myForm.addEventListener("submit", function(event) {
        event.preventDefault(); // Prevent form submission
        // Code to be executed when the form is submitted
        alert("Form submitted!");
      });

      window.addEventListener("load", function() {
        // Code to be executed when the webpage finishes loading
        console.log("Webpage loaded");
      });

      myElement.addEventListener("touchstart", function(event) {
        // Code to be executed when a touch point is placed on the element
        console.log("Touch started");
      });

      myAudio.addEventListener("play", function() {
        // Code to be executed when the audio starts playing
        console.log("Audio started playing");
      });
    });
  </script>
</head>
<body>
  <button id="myButton">Click Me</button>
  <div id="myElement" style="width: 200px; height: 200px; background-color: lightblue;"></div>
  <form id="myForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
  </form>
  <audio id="myAudio" src="audio.mp3"></audio>
</body>
</html>

Output:

In this example, each event listener is set up within the DOMContentLoaded event, which ensures that the elements referenced by their IDs (myButton, myElement, myForm, myAudio) are available in the DOM before attaching the event listeners. You can modify the code to include your specific functionality within each event handler.

Click Event:

document.getElementById("myButton").addEventListener("click", function() {
  // Code to be executed when the button is clicked
});

Mouseover Event:

document.getElementById("myElement").addEventListener("mouseover", function() {
  // Code to be executed when the mouse pointer is moved over the element
});

Keypress Event:

document.addEventListener("keypress", function(event) {
  // Code to be executed when a key is pressed
  var key = event.key;
  console.log("Key pressed: " + key);
});

Form Submit Event:

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission
  // Code to be executed when the form is submitted
});

Window Load Event:

window.addEventListener("load", function() {
  // Code to be executed when the webpage finishes loading
});

Touchstart Event (for mobile devices):

document.getElementById("myElement").addEventListener("touchstart", function(event) {
  // Code to be executed when a touch point is placed on the element
});

Media Play Event:

var myAudio = document.getElementById("myAudio");
myAudio.addEventListener("play", function() {
  // Code to be executed when the audio starts playing
});

These examples demonstrate how to use different events in JavaScript to trigger specific actions or behaviors based on user interactions or other events occurring on the webpage.

Comment if you have any doubts or suggestions on this JS event topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

JavaScript events list