JavaScript Events

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 element
• dblclick: Double click
• mousedown: When the mouse button is pressed down
• mouseup: When the mouse button is released
• mousemove: Moving the mouse over an element
• mouseenter / 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 down
• keyup: A key is released
• keypress: (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 submitted
• change: When the value of an input changes (after focus lost)
• input: Fires immediately when the value of an element changes
• focus / 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 loads
• resize: When the browser window is resized
• scroll: When the page is scrolled
• unload: 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 screen
• touchend: When a finger is removed
• touchmove: 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:

• copy
• cut
• paste

Example:

javascriptCopyEditdocument.addEventListener("paste", function(e) {
  alert("Content pasted!");
});

---

7. Media Events

These events deal with media elements like video and audio.

Media Events:

• play
• pause
• ended
• volumechange
• timeupdate

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