Events
Learn about events, how to listen for them, and handle them to make your web pages interactive.
JavaScript Events
Common Event Types
JavaScript events are actions or occurrences that happen in the browser, such as a user clicking a button, moving the mouse, or the page finishing loading. They are the mechanism that allows JavaScript code to react to user interactions and other browser-generated signals. Here's a brief overview of common event types:
- Mouse Events: Triggered by mouse interactions (e.g., click, hover, mouseup, mousedown).
- Keyboard Events: Triggered by keyboard actions (e.g., key press, key release).
- Form Events: Triggered by form-related actions (e.g., submission, focus, blur).
- Document/Window Events: Triggered by actions related to the document or window (e.g., page load, resize, scroll).
Deeper Dive into Event Types
Click Event
The click event fires when an element is clicked. It's one of the most fundamental and commonly used events.
Mouseover and Mouseout Events
The mouseover event fires when the mouse pointer enters an element.
The mouseout event fires when the mouse pointer leaves an element. They are often used together for hover effects.
Keydown and Keyup Events
The keydown event fires when a key is pressed down.
The keyup event fires when a key is released. keydown is triggered repeatedly if the key is held down.
Submit Event
The submit event fires when a form is submitted. It's typically used to validate form data before sending it to the server.
Load Event
The load event fires when a page or resource (like an image) has finished loading. It's useful for running initialization code after the DOM is ready. When listening for document load, use `window.onload` or `document.addEventListener('DOMContentLoaded', function() {})`
Page loading...
Image loading...