How to Create a Custom Event Listener in Javascript

In JavaScript, you can simply create custom event listeners. This will allow you to define your own custom events and trigger them as needed. Here’s a step-by-step guide on how to create and use custom event listeners

Step 1: Define a Custom Event

You can create a new custom event listener using the CustomEvent constructor class. This expects two arguments, the event name and an optional object containing event details.

const userDataEvent = new CustomEvent('userDataEvent', {
  detail: {
    userID: '1234',
    userName: 'Aditya Mishra',
    designation: 'Senior Software Engineer'
  }
});
// Trigger the event listener 
window.dispatchEvent(userDataEvent);

Step 2: Attach the Event Listener

Attach the userDataEvent listener to an element using the addEventListener method. This method takes the event name and a callback function as arguments.

window.addEventListener('userDataEvent', (event) => {
  console.log('User Data Custom event received:', event.detail);
});

In the above example, when you can run the code, the custom event listener will be triggered, and you will receive the user data “User Data Custom event received, {userData}” in your console.

Custom event listeners will be useful for creating javascript modular in your JavaScript applications, access different parts of your code to communicate and respond to custom events that you define.

Angular Interpolation Explained | Angular Tutorial – 3