JavaScript events are actions or occurrences that happen in the browser, which can be detected and responded to using code. Events are a crucial part of creating dynamic and interactive web pages.
This tutorial covers the most common types of JavaScript events, how they work, and how to use them effectively.
What Is an Event in JavaScript?
An event is an action that occurs in the browser. Examples include:
- A user clicking a button
- Pressing a key
- Moving the mouse
- Submitting a form
- Loading a page
JavaScript can “listen” for these events and execute a function (called an event handler) when the event happens.
1. Mouse Events
These events are triggered by mouse actions.
Common Mouse Events:
click: When the mouse clicks on an elementdblclick: Double clickmousedown: When the mouse button is pressed downmouseup: When the mouse button is releasedmousemove: Moving the mouse over an elementmouseenter/mouseleave: Mouse enters or leaves an element
Example:
javascriptCopyEditdocument.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});
2. Keyboard Events
Triggered by keyboard actions.
Keyboard Events:
keydown: A key is pressed downkeyup: A key is releasedkeypress: (Deprecated) Fired when a key that produces a character is pressed
Example:
javascriptCopyEditdocument.addEventListener("keydown", function(event) {
console.log("Key pressed: " + event.key);
});
3. Form Events
Used to handle input fields and form submission.
Form Events:
submit: When a form is submittedchange: When the value of an input changes (after focus lost)input: Fires immediately when the value of an element changesfocus/blur: When an element gains or loses focus
Example:
javascriptCopyEditdocument.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault(); // Prevents page reload
alert("Form submitted!");
});
4. Window Events
These events are related to the browser window or document.
Window Events:
load: When the page fully loadsresize: When the browser window is resizedscroll: When the page is scrolledunload: When the page is about to be unloaded
Example:
javascriptCopyEditwindow.addEventListener("load", function() {
console.log("Page fully loaded");
});
5. Touch Events (for Mobile)
Used for mobile and touchscreen interactions.
Touch Events:
touchstart: When a finger touches the screentouchend: When a finger is removedtouchmove: When a finger moves on the screen
These are useful for mobile apps or responsive designs.
6. Clipboard Events
Clipboard events allow you to respond when users copy, cut, or paste content.
Clipboard Events:
copycutpaste
Example:
javascriptCopyEditdocument.addEventListener("paste", function(e) {
alert("Content pasted!");
});
7. Media Events
These events deal with media elements like video and audio.
Media Events:
playpauseendedvolumechangetimeupdate
Example:
javascriptCopyEditlet video = document.querySelector("video");
video.addEventListener("ended", function() {
alert("Video has ended.");
});
How to Add Event Listeners
Use addEventListener() to attach an event to any DOM element.
javascriptCopyEditelement.addEventListener("event", functionName);
Example:
javascriptCopyEditdocument.getElementById("myBtn").addEventListener("click", showMessage);
function showMessage() {
alert("You clicked the button!");
}
Conclusion
JavaScript events are essential for building interactive websites. Here’s a quick summary of common event types:
| Event Type | Examples |
|---|---|
| Mouse | click, dblclick, mouseover |
| Keyboard | keydown, keyup |
| Form | submit, change, input |
| Window | load, resize, scroll |
| Touch | touchstart, touchend |
| Clipboard | copy, cut, paste |
| Media | play, pause, ended |