Question 61

Question

How would you implement a custom event in JavaScript?

Answer

Creating your own events in JavaScript gives you fine-grained control over how your application responds to specific happenings.

1. The Event Object:

JavaScript provides the built-in Event object as a foundation for events. You can create custom events by extending this base object or defining your own objects that mimic its structure and behavior.

2. Event Dispatching:

To trigger an event, you'll need to use the dispatchEvent() method on an element (or any DOMNode with the right properties). This method takes an Event object as its argument and broadcasts it throughout the target object's event listeners.

3. Listening for Events:

Listeners are functions that are called when an event is dispatched. You can attach them to elements or objects using methods like addEventListener().

Example: A Custom "UserLoggedIn" Event

// Create a custom Event class
class UserLoggedInEvent extends Event {
  constructor(detail) {
    super('userLoggedIn', { bubbles: true, composed: true }); // 'bubbles' = allows propagation to parent elements
    this.detail = detail; // Store additional data about the event
  }
}

// Element representing a login button (or any suitable target)
const loginButton = document.getElementById('loginButton');

loginButton.addEventListener('click', () => {
  const userEmail = '[e-mail]'; // Example logged-in user email
  const loggedInEvent = new UserLoggedInEvent({ userEmail }); 
  loginButton.dispatchEvent(loggedInEvent);
});

// Somewhere else in your code:
document.addEventListener('userLoggedIn', (event) => {
  console.log(`User ${event.detail.userEmail} has logged in!`); // Access event data
  // Perform other actions based on the login event
});

Key Points:

• Custom Event Type: In our example, 'userLoggedIn' represents the unique type of your custom event. You can choose any descriptive name.

• Event Detail: The detail property allows you to carry additional information about the event (like the logged-in user email).