# How to create a one-off event handler in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Sep 29, 2020, updated Sep 23, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-create-a-one-off-event-handler

> Learn how to use the addEventListener() method to create a one-off event handler that is called only once when the event occurs for the first time.

When you [register an event handler](https://attacomsian.com/blog/javascript-dom-add-an-event-handler) to an event of an element by using the `addEventListener()` method, the event handler executes every time the event occurs.

To create a one-off event handler that executes only once when the event occurs for the first time, you can use the third parameter of the `addEventListener()` method:

```javascript
elem.addEventListener(type, handler, {
    once: true
});
```

The third parameter of the `addEventListener()` method is an optional object that defines the properties of the event listener. One of its properties is `once`; a boolean value indicating that the event listener should be invoked at most once after being added. If it is set to `true`, the event handler will be automatically removed after the first execution.

Suppose that you have the following `<button>` element:

```html
<button id="register">Register Now</button>
```

The following example demonstrates how you can register a one-off event handler to the `click` event of the button:

```javascript
const btn = document.querySelector('#register');

// Attach a one-off event handler
btn.addEventListener('click', (e) => {
    console.log(`Button is clicked!`);
}, {
    once: true
});
```

The third parameter of `addEventListener()` method only works in modern browsers. For old browsers like Internet Explorer, you have to manually [remove the event handler](https://attacomsian.com/blog/javascript-dom-remove-an-event-handler) by using `removeEventListener()` after the first execution:

```javascript
// Create an Event Handler
const handler = (e) => {
    console.log(`Button is clicked!`);

    // Remove event handler after first execution
    btn.removeEventListener('click', handler);
};

// Attach event handler to button
const btn = document.querySelector('#register');

btn.addEventListener('click', handler);
```