Types of event handlers in JavaScript

In JavaScript, event handlers are functions that are executed in response to specific events occurring in a web page. Here are some common types of event handlers in JavaScript:

1. onclick: This event handler is triggered when an element is clicked by the user.

element.onclick = function() {
  // code to be executed when the element is clicked
};

2. onmouseover and onmouseout: These event handlers are triggered when the mouse pointer is moved over or out of an element, respectively.

element.onmouseover = function() {
  // code to be executed when the mouse pointer is moved over the element
};

element.onmouseout = function() {
  // code to be executed when the mouse pointer is moved out of the element
};

3. onkeydown and onkeyup: These event handlers are triggered when a key is pressed down or released, respectively.

element.onkeydown = function(event) {
  // code to be executed when a key is pressed down
};

element.onkeyup = function(event) {
  // code to be executed when a key is released
};

4. onload: This event handler is triggered when a web page or an image is finished loading.

window.onload = function() {
  // code to be executed when the page or image finishes loading
};

5. onsubmit: This event handler is triggered when a form is submitted.

form.onsubmit = function(event) {
  // code to be executed when the form is submitted
  event.preventDefault(); // prevent the default form submission behavior
};

Types of event handlers in JavaScript example

Simple example code.

onclick:

When the button is clicked, the event handler function is executed, and the message “Button clicked!” is logged to the console.

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

<script>
  var button = document.getElementById("myButton");
  button.onclick = function() {
    console.log("Button clicked!");
  };
</script>

onmouseover and onmouseout:

The mouse pointer is moved over the myDiv element, the “Mouse over the div!” message is logged to the console. Similarly, when the mouse pointer is moved out of the myDiv element, the “Mouse out of the div!” message is logged.

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

<script>
  var div = document.getElementById("myDiv");
  div.onmouseover = function() {
    console.log("Mouse over the div!");
  };

  div.onmouseout = function() {
    console.log("Mouse out of the div!");
  };
</script>

Output:

onkeydown

A key is pressed down while the focus is on the input field, the event handler function is executed, and the pressed key is logged to the console.

<input id="myInput" type="text">

<script>
  var input = document.getElementById("myInput");
  input.onkeydown = function(event) {
    console.log("Key pressed:", event.key);
  };
</script>

Event handlers allow developers to create dynamic and interactive web experiences by executing code in response to user actions.

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

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version