event listener javascript

Event Listener in JavaScript#

Event listeners are used in JavaScript to listen for certain actions or events that occur on a webpage. An event can be anything from a user clicking on a button to the page finishing loading. When an event occurs, the event listener will execute a block of code that is associated with it.

Adding an Event Listener#

To add an event listener in JavaScript, you first need to select the HTML element that you want to listen for events on. This can be done using the document.querySelector() method or by selecting the element by its id, class, or tag name.

// Select the button element
const button = document.querySelector('#myButton');

// Add an event listener to the button
button.addEventListener('click', function() {
  alert('Button clicked!');
});

In this example, we select the button element with an id of myButton using the document.querySelector() method. We then add an event listener to the button using the addEventListener() method. When the button is clicked, the code inside the anonymous function will execute, which in this case, displays an alert message.

Removing an Event Listener#

If you want to remove an event listener after it has been added, you can use the removeEventListener() method.

// Select the button element
const button = document.querySelector('#myButton');

// Define the function to be executed
function handleClick() {
  alert('Button clicked!');
}

// Add an event listener to the button
button.addEventListener('click', handleClick);

// Remove the event listener from the button
button.removeEventListener('click', handleClick);

In this example, we define the function handleClick() which displays an alert message. We then add an event listener to the button using addEventListener() and pass in handleClick as the function to be executed. Finally, we remove the event listener using removeEventListener().

Event Bubbling and Capturing#

When an event occurs on an element, it also occurs on all of its ancestor elements. This is known as event bubbling. By default, event listeners are added in bubbling mode, which means that the event will first trigger on the target element and then bubble up through its ancestors.

You can also add event listeners in capturing mode, which means that the event will first trigger on the root element and then travel down through the ancestors to the target element.

// Add an event listener in capturing mode
button.addEventListener('click', handleClick, true);

// Add an event listener in bubbling mode
button.addEventListener('click', handleClick, false);

In this example, we add an event listener to the button element in both capturing and bubbling mode. To add an event listener in capturing mode, you pass in a third argument of true to addEventListener().

It's important to note that not all events support capturing mode.