> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/javascript-interview-questions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/javascript-interview-questions/question-61.md).

# 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**

```javascript
// 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 = 'alice@example.com'; // 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).