JavaScript Events

1// Get the element
2const button = document.querySelector('#myButton');
3
4// Add event listener
5button.addEventListener('click', function() {
6  console.log('Button was clicked!');
7});
8
9// Using a named function
10function handleClick() {
11  console.log('Button was clicked!');
12}
13
14button.addEventListener('click', handleClick);
15
16// Using an arrow function
17button.addEventListener('click', () => {
18  console.log('Button was clicked!');
19});

1<!-- HTML with inline event handler -->
2<button onclick="alert('Button was clicked!')">Click Me</button>
3
4<!-- Calling a function defined elsewhere -->
5<button onclick="handleClick()">Click Me</button>
6
7<!-- JavaScript function -->
8<script>
9  function handleClick() {
10    alert('Button was clicked!');
11  }
12</script>

1// Get the element
2const button = document.querySelector('#myButton');
3
4// Assign function to event property
5button.onclick = function() {
6  console.log('Button was clicked!');
7};
8
9// Note: This method only allows one handler per event per element
10// If you assign another function, it overwrites the previous one:
11button.onclick = function() {
12  console.log('This handler replaced the previous one');
13};

1// The event object is automatically passed to the handler
2document.querySelector('#myButton').addEventListener('click', function(event) {
3  // 'event' contains information about the click event
4  console.log('Event type:', event.type);  // "click"
5  console.log('Target element:', event.target);  // The element that was clicked
6  console.log('Current target:', event.currentTarget);  // The element the listener is attached to
7  console.log('Mouse position:', event.clientX, event.clientY);  // Mouse coordinates
8  
9  // Prevent default behavior (e.g., for links or form submissions)
10  event.preventDefault();
11  
12  // Stop event propagation (bubbling/capturing)
13  event.stopPropagation();
14});
15
16// Common properties of the event object vary by event type
17document.addEventListener('keydown', function(event) {
18  console.log('Key pressed:', event.key);  // The key that was pressed
19  console.log('Key code:', event.keyCode);  // Numeric key code (deprecated)
20  console.log('Shift key pressed:', event.shiftKey);  // Boolean for modifier keys
21});

1<!-- HTML structure -->
2<div id="outer">
3  <div id="inner">
4    <button id="button">Click Me</button>
5  </div>
6</div>
7
8<script>
9  // When the button is clicked, the event bubbles up:
10  // 1. First, the button's click handler runs
11  // 2. Then, the inner div's click handler runs
12  // 3. Finally, the outer div's click handler runs
13  
14  document.getElementById('button').addEventListener('click', function() {
15    console.log('Button clicked');
16  });
17  
18  document.getElementById('inner').addEventListener('click', function() {
19    console.log('Inner div clicked');
20  });
21  
22  document.getElementById('outer').addEventListener('click', function() {
23    console.log('Outer div clicked');
24  });
25</script>

1// The third parameter of addEventListener can be set to true for capturing phase
2document.getElementById('outer').addEventListener('click', function() {
3  console.log('Outer div - Capture phase');
4}, true);  // true enables capturing
5
6document.getElementById('inner').addEventListener('click', function() {
7  console.log('Inner div - Capture phase');
8}, true);
9
10document.getElementById('button').addEventListener('click', function() {
11  console.log('Button - Capture phase');
12});
13
14// With capturing enabled, the order becomes:
15// 1. Outer div (capture phase)
16// 2. Inner div (capture phase)
17// 3. Button (target phase)
18// 4. Inner div (bubbling phase)
19// 5. Outer div (bubbling phase)

1document.getElementById('button').addEventListener('click', function(event) {
2  console.log('Button clicked');
3  
4  // Stop the event from bubbling up to parent elements
5  event.stopPropagation();
6});
7
8// This won't run when the button is clicked because propagation is stopped
9document.getElementById('inner').addEventListener('click', function() {
10  console.log('Inner div clicked');  // This won't execute
11});

1// Prevent a link from navigating
2document.querySelector('a').addEventListener('click', function(event) {
3  event.preventDefault();  // Link won't navigate
4  console.log('Link clicked, but navigation prevented');
5});
6
7// Prevent a form from submitting
8document.querySelector('form').addEventListener('submit', function(event) {
9  event.preventDefault();  // Form won't submit
10  console.log('Form submitted, but default submission prevented');
11  
12  // You can validate the form and submit it programmatically if valid
13  if (validateForm()) {
14    this.submit();  // Manual submission
15  }
16});
17
18// Prevent right-click context menu
19document.addEventListener('contextmenu', function(event) {
20  event.preventDefault();  // Right-click menu won't appear
21  console.log('Context menu prevented');
22});

1// HTML structure
2/*
3<ul id="todo-list">
4  <li>Task 1 <button class="delete">X</button></li>
5  <li>Task 2 <button class="delete">X</button></li>
6  <li>Task 3 <button class="delete">X</button></li>
7  <!-- More items might be added dynamically -->
8</ul>
9*/
10
11// Without event delegation - problematic for dynamic elements
12// This only works for elements that exist when the code runs
13document.querySelectorAll('#todo-list .delete').forEach(button => {
14  button.addEventListener('click', function() {
15    this.parentElement.remove();
16  });
17});
18
19// With event delegation - works for all current and future elements
20document.getElementById('todo-list').addEventListener('click', function(event) {
21  // Check if the clicked element has the 'delete' class
22  if (event.target.classList.contains('delete')) {
23    // Remove the parent <li> element
24    event.target.parentElement.remove();
25  }
26});

1// Click event
2element.addEventListener('click', function() {
3  console.log('Element clicked');
4});
5
6// Double-click event
7element.addEventListener('dblclick', function() {
8  console.log('Element double-clicked');
9});
10
11// Mouse over (hover) and mouse out
12element.addEventListener('mouseover', function() {
13  console.log('Mouse entered element');
14});
15
16element.addEventListener('mouseout', function() {
17  console.log('Mouse left element');
18});
19
20// Mouse down and mouse up (parts of a click)
21element.addEventListener('mousedown', function() {
22  console.log('Mouse button pressed down');
23});
24
25element.addEventListener('mouseup', function() {
26  console.log('Mouse button released');
27});
28
29// Mouse move (track mouse position)
30element.addEventListener('mousemove', function(event) {
31  console.log('Mouse position:', event.clientX, event.clientY);
32});

1// Key down (when key is pressed)
2document.addEventListener('keydown', function(event) {
3  console.log('Key pressed:', event.key);
4  
5  // Check for specific keys
6  if (event.key === 'Enter') {
7    console.log('Enter key pressed');
8  }
9  
10  // Check for key combinations
11  if (event.ctrlKey && event.key === 's') {
12    console.log('Ctrl+S pressed');
13    event.preventDefault();  // Prevent browser's save dialog
14  }
15});
16
17// Key up (when key is released)
18document.addEventListener('keyup', function(event) {
19  console.log('Key released:', event.key);
20});
21
22// Key press (character input - deprecated)
23document.addEventListener('keypress', function(event) {
24  console.log('Character input:', event.key);
25});
26
27// Input event (for text input changes)
28document.querySelector('input').addEventListener('input', function() {
29  console.log('Input value changed:', this.value);
30});

1// Form submission
2document.querySelector('form').addEventListener('submit', function(event) {
3  event.preventDefault();  // Prevent actual submission
4  console.log('Form submitted');
5  
6  // Get form data
7  const formData = new FormData(this);
8  for (let [name, value] of formData.entries()) {
9    console.log(name + ': ' + value);
10  }
11});
12
13// Input change (when value changes and element loses focus)
14document.querySelector('input').addEventListener('change', function() {
15  console.log('Input value changed to:', this.value);
16});
17
18// Focus (when element receives focus)
19document.querySelector('input').addEventListener('focus', function() {
20  console.log('Input focused');
21  this.style.backgroundColor = '#f0f0ff';
22});
23
24// Blur (when element loses focus)
25document.querySelector('input').addEventListener('blur', function() {
26  console.log('Input lost focus');
27  this.style.backgroundColor = '';
28  
29  // Often used for validation
30  if (this.value === '') {
31    this.classList.add('error');
32  }
33});

1// Page loaded (all resources)
2window.addEventListener('load', function() {
3  console.log('Page fully loaded');
4});
5
6// DOM content loaded (HTML parsed, but not all resources)
7document.addEventListener('DOMContentLoaded', function() {
8  console.log('DOM ready');
9});
10
11// Window resize
12window.addEventListener('resize', function() {
13  console.log('Window resized to:', window.innerWidth, 'x', window.innerHeight);
14});
15
16// Scroll event
17window.addEventListener('scroll', function() {
18  console.log('Scrolled to position:', window.scrollX, window.scrollY);
19  
20  // Throttle scroll events for better performance
21});
22
23// Before unload (user is leaving the page)
24window.addEventListener('beforeunload', function(event) {
25  // Show confirmation dialog if there are unsaved changes
26  if (hasUnsavedChanges) {
27    event.preventDefault();
28    event.returnValue = '';  // Required for some browsers
29    return '';  // Required for some browsers
30  }
31});

1// Create a custom event
2const productAddedEvent = new CustomEvent('productAdded', {
3  detail: {
4    productId: 123,
5    productName: 'Wireless Headphones',
6    price: 79.99
7  },
8  bubbles: true,
9  cancelable: true
10});
11
12// Listen for the custom event
13document.getElementById('cart').addEventListener('productAdded', function(event) {
14  console.log('Product added to cart:', event.detail.productName);
15  console.log('Price:', event.detail.price);
16  
17  // Update cart UI
18  updateCartUI(event.detail);
19});
20
21// Dispatch the custom event
22function addToCart(product) {
23  // Add product to cart logic...
24  
25  // Create and dispatch event with product data
26  const event = new CustomEvent('productAdded', {
27    detail: product,
28    bubbles: true
29  });
30  
31  document.getElementById('cart').dispatchEvent(event);
32}

1// Debouncing - only execute after user stops (e.g., typing)
2function debounce(func, delay) {
3  let timeout;
4  return function() {
5    const context = this;
6    const args = arguments;
7    clearTimeout(timeout);
8    timeout = setTimeout(() => func.apply(context, args), delay);
9  };
10}
11
12// Usage
13const debouncedSearch = debounce(function() {
14  console.log('Searching for:', this.value);
15  // Perform search operation
16}, 300);
17
18document.querySelector('#search').addEventListener('input', debouncedSearch);
19
20// Throttling - execute at most once per specified time
21function throttle(func, limit) {
22  let inThrottle;
23  return function() {
24    const context = this;
25    const args = arguments;
26    if (!inThrottle) {
27      func.apply(context, args);
28      inThrottle = true;
29      setTimeout(() => inThrottle = false, limit);
30    }
31  };
32}
33
34// Usage
35const throttledScroll = throttle(function() {
36  console.log('Scroll position:', window.scrollY);
37  // Update UI based on scroll
38}, 100);
39
40window.addEventListener('scroll', throttledScroll);

1// Define the handler function
2function handleClick() {
3  console.log('Button clicked');
4  
5  // Remove the event listener after it's used once
6  this.removeEventListener('click', handleClick);
7}
8
9// Add the event listener
10document.getElementById('myButton').addEventListener('click', handleClick);
11
12// Removing event listeners when elements are removed
13function createTemporaryButton() {
14  const button = document.createElement('button');
15  button.textContent = 'Temporary Button';
16  
17  function handleClick() {
18    console.log('Temporary button clicked');
19  }
20  
21  button.addEventListener('click', handleClick);
22  document.body.appendChild(button);
23  
24  // Return a cleanup function
25  return function cleanup() {
26    button.removeEventListener('click', handleClick);
27    button.remove();
28  };
29}
30
31const cleanupButton = createTemporaryButton();
32
33// Later, when the button is no longer needed:
34cleanupButton();