ā¤ Like
šŸ”– Save
šŸ”— Share
@thedevspaceio
@thedevspaceio

JavaScript Events Cheatsheet

@thedevspaceio

šŸ–±ļø JavaScript Events Cheatsheet

JavaScript events notify your code when something happens in the browser, enabling interactive and responsive web pages.

āœ… Adding event listeners āœ… Common event types āœ… The event object āœ… Event propagation āœ… Event delegation āœ… Preventing default behavior āœ… Stopping propagation āœ… Removing event listeners āœ… Keyboard events

#javascript #events #dom #browser #webdev #frontend #coding #tips

Adding event listeners

Use addEventListener to attach a function to an event.

js
const button = document.getElementById("submit");
 
button.addEventListener("click", () => {
  console.log("Button clicked");
});

You can also use onevent properties, but addEventListener is preferred because it supports multiple listeners.

js
button.onclick = () => {
  console.log("Clicked");
};

Common event types

Event typeFires when...
clickAn element is clicked.
dblclickAn element is double-clicked.
mouseoverThe pointer enters an element.
mouseoutThe pointer leaves an element.
keydownA key is pressed down.
keyupA key is released.
submitA form is submitted.
changeThe value of an input changes.
inputThe value of an input changes live.
focusAn element receives focus.
blurAn element loses focus.
loadA resource finishes loading.
resizeThe viewport is resized.
scrollAn element is scrolled.

The event object

The listener receives an event object with useful properties and methods.

js
document.addEventListener("click", (event) => {
  console.log(event.type); // "click"
  console.log(event.target); // element that was clicked
  console.log(event.clientX); // horizontal click position
  console.log(event.clientY); // vertical click position
});

Common event object properties.

PropertyDescription
targetThe element that triggered the event.
currentTargetThe element the listener is attached to.
typeThe event type.
keyThe key pressed for keyboard events.
preventDefault()Cancels the default action.
stopPropagation()Stops event propagation.

Event propagation

Events travel through the DOM in two phases: bubbling and capturing.

Bubbling is when the event travels from the child to the parent.

js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
 
parent.addEventListener("click", () => {
  console.log("Parent clicked");
});
 
child.addEventListener("click", () => {
  console.log("Child clicked");
});
 
// Console logs ā¬‡ļø
// Child clicked
// Parent clicked

Capturing is when the event travels from the parent down to the child element.

Set the third argument of addEventListener to true to listen during the capturing phase.

js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
 
parent.addEventListener(
  "click",
  () => {
    console.log("Parent clicked");
  },
  true,
);
 
child.addEventListener(
  "click",
  () => {
    console.log("Child clicked");
  },
  true,
);
 
// Console logs ā¬‡ļø
// Parent clicked
// Child clicked

Event delegation

Attach one listener to a parent to handle events from many children.

js
document.getElementById("list").addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log(event.target.textContent);
  }
});

This works for dynamically added elements too.

Preventing default behavior

Use preventDefault to stop the browser's default action.

js
document.querySelector("a").addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Link click prevented");
});

Common use cases include preventing form submissions and link navigation.

js
document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
  // validate and submit with fetch
});

Stopping propagation

Use stopPropagation to prevent the event from reaching parent elements.

js
child.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Child only");
});

Removing event listeners

Use removeEventListener to detach a listener.

js
function handleClick() {
  console.log("Clicked");
}
 
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Keyboard events

Listen for key presses and inspect the key property.

js
document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("Enter pressed");
  }
});

Useful modifier properties.

js
document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    console.log("Save shortcut");
  }
});

Full-Stack AI Developer Roadmap

From HTML & CSS to working with AI models, all in one structured roadmap.

@thedevspaceio
www.thedevspace.io