JavaScript Event Handling

What is event handling in JavaScript?

Event handling in JavaScript refers to the process of responding to user interactions with web elements, such as clicks, key presses, mouse movements, and more. It allows developers to create interactive web applications.

What are events in JavaScript?

Events are actions or occurrences that happen in the browser, often triggered by user interactions, such as mouse clicks, form submissions, or keyboard presses. JavaScript can listen for these events and execute corresponding functions (event handlers).

How do you attach an event handler to an element?

You can attach an event handler to an element using the addEventListener() method. This method allows you to specify the event type and the function to execute when the event occurs.


const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

What is the difference between `onclick` and `addEventListener()`?

Using onclick assigns a single event handler directly to an element, while addEventListener() allows you to add multiple event handlers for the same event type without overwriting existing handlers. Additionally, addEventListener() offers better control over event propagation and can handle events that bubble.


// Using onclick
button.onclick = () => {
  console.log('First click!');
};

// Using addEventListener
button.addEventListener('click', () => {
  console.log('Second click!');
});

How do you remove an event handler?

You can remove an event handler using the removeEventListener() method. You must pass the same event type and function reference that were used to add the event handler.


const handleClick = () => {
  console.log('Button clicked!');
};

button.addEventListener('click', handleClick);

// Later, to remove the event handler
button.removeEventListener('click', handleClick);

What is event propagation?

Event propagation refers to the way events flow through the DOM. There are two phases: bubbling, where the event starts from the target element and propagates up to the root, and capturing, where the event starts from the root and propagates down to the target element.

What is event delegation?

Event delegation is a technique where a single event listener is attached to a parent element instead of individual child elements. This allows you to handle events for dynamically added elements and improves performance by reducing the number of event listeners.


const list = document.getElementById('myList');
list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    alert(`List item ${event.target.textContent} clicked!`);
  }
});

What is the `event` object?

The event object is an object that is automatically passed to event handler functions. It contains information about the event, such as the type of event, the target element, and methods to control the event's default behavior and propagation.


button.addEventListener('click', (event) => {
  console.log(event.type); // Outputs: 'click'
  console.log(event.target); // Outputs: the button element
  event.preventDefault(); // Prevents the default action
});

How do you prevent the default action of an event?

You can prevent the default action of an event by calling the preventDefault() method on the event object within the event handler.


const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevents form submission
  console.log('Form submitted!');
});

What is the difference between `stopPropagation()` and `stopImmediatePropagation()`?

stopPropagation() prevents the event from bubbling up or capturing down through the DOM, while stopImmediatePropagation() does the same and also prevents other listeners of the same event from being called.


const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log('Parent clicked!');
});

child.addEventListener('click', (event) => {
  event.stopPropagation(); // Prevents parent listener from executing
  console.log('Child clicked!');
});

// If you use stopImmediatePropagation, other child event listeners will not run
child.addEventListener('click', (event) => {
  event.stopImmediatePropagation(); // Stops other listeners
  console.log('Another child clicked!');
});

How can you handle multiple events with a single event listener?

You can handle multiple events with a single event listener by specifying the event types in a string, separating them with spaces.


const handleClickOrHover = () => {
  console.log('Clicked or hovered!');
};

button.addEventListener('click', handleClickOrHover);
button.addEventListener('mouseover', handleClickOrHover);

Ads

‹ JavaScript Interview