Top 50+ JavaScript Events You Should Know

February 2, 2025

Top 50+ JavaScript Events You Should Know

JavaScript events help make web pages fun and interactive. They let your web page respond when people click, type, or move the mouse. Here are more than 50 important events you should learn about!

1. Mouse Events

1.1 click

Triggered when an element is clicked.

javascript 
Copydocument.getElementById('myButton').addEventListener('click', () => {
  alert('Button clicked!');
});

1.2 dblclick

Triggered when an element is double-clicked.

javascript 
Copydocument.getElementById('myDiv').addEventListener('dblclick', () => {
  alert('Div double-clicked!');
});

1.3 mousedown

Triggered when the mouse button is pressed down.

javascript 
Copydocument.addEventListener('mousedown', (event) => {
  console.log('Mouse button pressed:', event.button);
});

1.4 mouseup

Triggered when the mouse button is released.

javascript 
Copydocument.addEventListener('mouseup', () => {
  console.log('Mouse button released');
});

1.5 mousemove

Triggered when the mouse moves over an element.

javascript 
Copydocument.addEventListener('mousemove', (event) => {
  console.log('Mouse position:', event.clientX, event.clientY);
});

1.6 mouseenter

Triggered when the mouse enters an element.

javascript 
Copydocument.getElementById('myDiv').addEventListener('mouseenter', () => {
  console.log('Mouse entered the div');
});

1.7 mouseleave

Triggered when the mouse leaves an element.

javascript 
Copydocument.getElementById('myDiv').addEventListener('mouseleave', () => {
  console.log('Mouse left the div');
});

1.8 wheel

Triggered when the mouse wheel is used.

javascript 
Copydocument.addEventListener('wheel', (event) => {
  console.log('Wheel event:', event.deltaY);
});

2. Keyboard Events

2.1 keydown

Triggered when a key is pressed down.

javascript 
Copydocument.addEventListener('keydown', (event) => {
  console.log('Key down:', event.key);
});

2.2 keyup

Triggered when a key is released.

javascript 
Copydocument.addEventListener('keyup', (event) => {
  console.log('Key up:', event.key);
});

2.3 keypress

Triggered when a character key is pressed (deprecated).

javascript 
Copydocument.addEventListener('keypress', (event) => {
  console.log('Key pressed:', event.key);
});

3. Form Events

3.1 submit

Triggered when a form is submitted.

javascript 
Copydocument.getElementById('myForm').addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent default form submission
  console.log('Form submitted!');
});

3.2 change

Triggered when an input field changes.

javascript 
Copydocument.getElementById('myInput').addEventListener('change', (event) => {
  console.log('Input changed:', event.target.value);
});

3.3 input

Triggered when the value of an input field changes (live updates).

javascript 
Copydocument.getElementById('myInput').addEventListener('input', (event) => {
  console.log('Input value:', event.target.value);
});

3.4 focus

Triggered when an input field receives focus.

javascript 
Copydocument.getElementById('myInput').addEventListener('focus', () => {
  console.log('Input focused');
});

3.5 blur

Triggered when an input field loses focus.

javascript 
Copydocument.getElementById('myInput').addEventListener('blur', () => {
  console.log('Input blurred');
});

4. Window and Document Events

4.1 load

Triggered when the entire page is loaded, including all dependent resources.

javascript 
Copywindow.addEventListener('load', () => {
  console.log('Page fully loaded');
});

4.2 resize

Triggered when the browser window is resized.

javascript 
Copywindow.addEventListener('resize', () => {
  console.log('Window resized:', window.innerWidth, window.innerHeight);
});

4.3 scroll

Triggered when the user scrolls the document.

javascript 
Copywindow.addEventListener('scroll', () => {
  console.log('Page scrolled');
});

4.4 unload

Triggered when the document or a child resource is being unloaded.

javascript 
Copywindow.addEventListener('unload', () => {
  console.log('Page unloaded');
});

4.5 beforeunload

Triggered before the user leaves the page, allowing you to prompt them.

c# 
Copywindow.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = 'Are you sure you want to leave?';
});

5. Touch Events

5.1 touchstart

Triggered when a touch point is placed on the touch surface.

javascript 
Copydocument.addEventListener('touchstart', (event) => {
  console.log('Touch started');
});

5.2 touchmove

Triggered when a touch point is moved along the touch surface.

javascript 
Copydocument.addEventListener('touchmove', (event) => {
  console.log('Touch moving');
});

5.3 touchend

Triggered when a touch point is removed from the touch surface.

javascript 
Copydocument.addEventListener('touchend', (event) => {
  console.log('Touch ended');
});

6. Clipboard Events

6.1 copy

Triggered when the user copies content.

javascript 
Copydocument.addEventListener('copy', () => {
  console.log('Content copied to clipboard');
});

6.2 cut

Triggered when the user cuts content.

javascript 
Copydocument.addEventListener('cut', () => {
  console.log('Content cut from clipboard');
});

6.3 paste

Triggered when the user pastes content.

javascript 
Copydocument.addEventListener('paste', () => {
  console.log('Content pasted from clipboard');
});

7. Media Events

7.1 play

Triggered when media starts playing.

javascript 
Copyconst video = document.getElementById('myVideo');
video.addEventListener('play', () => {
  console.log('Video is playing');
});

7.2 pause

Triggered when media is paused.

javascript 
Copyvideo.addEventListener('pause', () => {
  console.log('Video is paused');
});

7.3 ended

Triggered when media playback ends.

javascript 
Copyvideo.addEventListener('ended', () => {
  console.log('Video playback ended');
});

7.4 volumechange

Triggered when the volume changes.

javascript 
Copyvideo.addEventListener('volumechange', () => {
  console.log('Volume changed to:', video.volume);
});

8. Custom Events

8.1 CustomEvent

Create and dispatch custom events.

javascript 
Copyconst event = new CustomEvent('myCustomEvent', { detail: { key: 'value' } });
document.dispatchEvent(event);

document.addEventListener('myCustomEvent', (e) => {
  console.log('Custom event triggered:', e.detail);
});

9. Other Notable Events

9.1 focusin

Triggered when an element or any child element receives focus.

javascript 
Copydocument.getElementById('myInput').addEventListener('focusin', () => {
  console.log('Focus in on input or its children');
});

9.2 focusout

Triggered when an element or any child element loses focus.

javascript 
Copydocument.getElementById('myInput').addEventListener('focusout', () => {
  console.log('Focus out from input or its children');
});

9.3 contextmenu

Triggered when the right mouse button is clicked.

javascript 
Copydocument.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // Prevent default context menu
  console.log('Custom context menu opened');
});

9.4 animationstart

Triggered when a CSS animation starts.

javascript 
Copydocument.getElementById('myElement').addEventListener('animationstart', () => {
  console.log('Animation started');
});

9.5 animationend

Triggered when a CSS animation ends.

javascript 
Copydocument.getElementById('myElement').addEventListener('animationend', () => {
  console.log('Animation ended');
});

9.6 transitionend

Triggered when a CSS transition ends.

javascript 
Copydocument.getElementById('myElement').addEventListener('transitionend', () => {
  console.log('Transition ended');
});

Conclusion

Knowing about JavaScript events is important for making fun web apps. This list has helpful events you can use to make your site better. When you use these events well, you can create apps that are easy to use and make people happy.

Docker-level-1

Docker 0 to Hero

September 22, 2024·Devops

backend

Multer Guide For Begginers

How to use multer

September 22, 2024·backend

;