The JavaScript event listeners list is a collection of various events that can be listened to and handled in JavaScript. Event listeners allow you to respond to user actions or specific occurrences in your web page or application.
By attaching event listeners to HTML elements, you can execute code or trigger functions when those events occur.
The syntax for adding event listeners in JavaScript is as follows:
element.addEventListener(event, listenerFunction);element: The HTML element to which the event listener will be attached.event: The name of the event that triggers the listener.listenerFunction: The function that will be executed when the event occurs.
var button = document.getElementById('myButton');
function handleClick() {
// Handle the click event
console.log('Button clicked!');
}
button.addEventListener('click', handleClick);
Here’s the list of JavaScript event listeners in a tabular format:
| Event | Description |
|---|---|
| click | Fires when an element is clicked. |
| dblclick | Fires when an element is double-clicked. |
| mousedown | Fires when a mouse button is pressed down on an element. |
| mouseup | Fires when a mouse button is released on an element. |
| mousemove | Fires when the mouse pointer moves over an element. |
| mouseover | Fires when the mouse pointer moves onto an element. |
| mouseout | Fires when the mouse pointer moves off an element. |
| mouseenter | Fires when the mouse pointer enters an element. |
| mouseleave | Fires when the mouse pointer leaves an element. |
| keydown | Fires when a key is pressed down. |
| keyup | Fires when a key is released. |
| keypress | Fires when a key is pressed down and released. |
| focus | Fires when an element receives focus. |
| blur | Fires when an element loses focus. |
| change | Fires when the value of an input element changes. |
| submit | Fires when a form is submitted. |
| input | Fires when the value of an input element changes. |
| resize | Fires when the browser window is resized. |
| scroll | Fires when an element’s scrollbar is scrolled. |
| load | Fires when a web page or an image is finished loading. |
| unload | Fires when a web page is about to be unloaded. |
JavaScript event listeners list example
Simple example code that demonstrates how to use event listeners in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners Example</title>
<script>
// Function to handle the click event
function handleClick() {
alert("Button clicked!");
}
// Function to handle the keydown event
function handleKeydown(event) {
console.log("Key pressed:", event.key);
}
// Function to handle the submit event
function handleSubmit(event) {
event.preventDefault(); // Prevent form submission
console.log("Form submitted");
}
// Attaching event listeners to elements
window.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('myButton');
var form = document.getElementById('myForm');
var input = document.getElementById('myInput');
button.addEventListener('click', handleClick);
input.addEventListener('keydown', handleKeydown);
form.addEventListener('submit', handleSubmit);
});
</script>
</head>
<body>
<button id="myButton">Click Me!</button>
<form id="myForm">
<input type="text" id="myInput" placeholder="Type something">
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
In this example, we have three event listeners set up:
- The
handleClickfunction is attached to theclickevent of the button. When the button is clicked, an alert is displayed. - The
handleKeydownfunction is attached to thekeydownevent of the input field. When a key is pressed down in the input field, the key value is logged to the console. - The
handleSubmitfunction is attached to thesubmitevent of the form. When the form is submitted (by clicking the submit button), the default form submission is prevented, and a message is logged to the console.
Comment if you have any doubts or suggestions on this Js event listeners topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version