JavaScript DOM Events Cheat Sheet
1. Mouse Events
click - User clicks an element
dblclick - User double-clicks
mousedown - Mouse button is pressed down
mouseup - Mouse button is released
mouseenter - Mouse enters element (no bubble)
mouseleave - Mouse leaves element (no bubble)
mouseover - Mouse enters (bubbles)
mouseout - Mouse leaves (bubbles)
mousemove - Mouse moves over element
contextmenu - Right-click
2. Keyboard Events
keydown - Key is pressed down
keyup - Key is released
keypress (deprecated) - Press and hold a character key
3. Form/Input Events
input - Value changes in <input> or <textarea> (real-time)
change - Element loses focus and value changed
submit - Form is submitted
focus - Element receives focus
blur - Element loses focus
reset - Form is reset
4. Window & Document Events
load - Entire page (including images) loaded
DOMContentLoaded - DOM fully parsed (before images)
resize - Window resized
scroll - User scrolls
beforeunload - Before page unload
5. Clipboard Events
copy - Copy from an element
cut - Cut from an element
paste - Paste into an element
JavaScript DOM Events Cheat Sheet
6. Drag & Drop Events
dragstart - Start dragging
dragover - Dragging over target
drop - Element dropped
dragend - Dragging ends
7. Touch Events (Mobile)
touchstart - Finger touches screen
touchmove - Finger moves on screen
touchend - Finger is lifted off
Tips & Explanations
- Difference between `input` and `change`: `input` fires immediately as you type, `change` fires when input loses focus.
- preventDefault(): Prevents the browser's default behavior (e.g., stopping form submission).
- stopPropagation(): Stops the event from bubbling up the DOM tree.
- Event Bubbling vs. Capturing: Bubbling = inside to out (default), Capturing = outside to in (useCapture true).
- Debouncing: Limits how often an event (like scroll) fires. Useful for performance.
Practice Questions
Q1: Create a button that logs "Clicked" when clicked.
Q2: Listen to keydown and show the key pressed.
Q3: Prevent a form from submitting and show alert instead.
Q4: Log scroll event on the window.
Q5: Allow drag & drop between two divs.
Answers with Code
Q1:
document.querySelector("button").addEventListener("click", () => {
console.log("Clicked");
});
Q2:
document.addEventListener("keydown", (e) => {
console.log("Key pressed:", e.key);
});
JavaScript DOM Events Cheat Sheet
Q3:
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
alert("Form blocked!");
});
Q4:
window.addEventListener("scroll", () => {
console.log("Scrolling...");
});
Q5:
// HTML: <div id="drag1" draggable="true"></div><div id="dropzone"></div>
document.getElementById("drag1").addEventListener("dragstart", e => {
e.dataTransfer.setData("text", e.target.id);
});
document.getElementById("dropzone").addEventListener("dragover", e => {
e.preventDefault();
});
document.getElementById("dropzone").addEventListener("drop", e => {
const data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
});
