# Triggering built-in and custom events using 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-trigger-built-in-and-custom-events

> Learn how to trigger an event on an element programmatically by using JavaScript DOM API.

There are different ways to trigger an event on an HTML element in JavaScript. Some elements provide built-in methods for triggering different kinds of events.

For example, to trigger a `click` event on any HTML element, you can use the `click()` method of the element DOM object:

```javascript
const btn = document.querySelector('button');
btn.click();
```

Similarly, the `<input>` and `<textarea>` HTML elements provide the `focus()` and `blur()` methods to trigger the `focus` and `blur` events:

```javascript
const input = document.querySelector('input');

// Focus input element
input.focus();

// Blur input element
input.blur();
```

The `<form>` element offers the `submit()` and `reset()` methods for triggering the `submit()` and `reset` events:

```javascript
const form = document.querySelector('form');

// Trigger submit event
form.submit();

// Trigger reset event
form.reset();
```

## Triggering built-in events

To trigger other events such as the `change` or `keyup`,  you need to create an `Event` object and pass it to the `dispatchEvent()` method of the element object as shown below:

```javascript
const select = document.querySelector('select');

// Listen for change event
select.addEventListener('change', (e) => {
    console.log(`A new value is selected.`);
});

// Programmatically trigger `change` event
const event = new Event('change');

select.dispatchEvent(event);
```

In the above example, we first [registered an event handler](https://attacomsian.com/blog/javascript-dom-add-an-event-handler) to the `change` event of the `<select>` element, then created a new event by using the `Event` constructor, and finally used the `dispatchEvent()` method to trigger the `change` event.

## Triggering a custom event

The `Event` constructor can also be used to trigger a custom event as shown below:

```javascript
// Listen for `hello` event
select.addEventListener('hello', (e) => {
    console.log(`Hey there!`);
});

// Programmatically trigger `hello` event
const event = new Event('hello');

select.dispatchEvent(event);
```

## Passing custom data – `CustomEvent()`

To pass more data to the event object, You can use the `CustomEvent()` constructor instead. It accepts an optional object as a second parameter that can be used to define event properties. The `detail` property of the optional object can be used to pass custom data.

Let us say you have the following `<time>` element:

```html
<time data-time="2020-09-29T13:58:25.546Z">Sep 29th, 2020</time>
```

The following example demonstrates how you can trigger a custom event called `buildTime` and pass additional data to the event object:

```javascript
// Define an event handler
const handler = (e) => {
    console.log(`Build time is ${e.detail}`);
};

// Listen for `buildTime` custom event
document.addEventListener('buildTime', handler);

// Trigger `buildTime` custom event
const time = document.querySelector('time');

const event = new CustomEvent('buildTime', {
    detail: time.dataset.time
});

document.dispatchEvent(event);
```

## The old-fashioned way

The `Event` constructor works in all modern browsers except Internet Explorer. To support old browsers like IE9+, you can use the `document.createEvent()` method to create an trigger an event as shown below:

```javascript
const elem = document.querySelector('button');

// Define an event handler
const handler = (e) => {
    console.log(`Event is triggered!`);
};

// Listen for `awesome` event
elem.addEventListener('awesome', handler);

// Create an event - IE9+
const event = document.createEvent('Event');

// Define the event name
event.initEvent('awesome', false, true);

// Trigger `awesome` event
elem.dispatchEvent(event);
```

## Event bubbling

Sometimes you may want to trigger an event from the child element and capture it on a parent element. To do so, just set the `bubbles` property to `true`.

Let us say you have the following HTML code snippet:

```html
<form>
    <input type="text" name="name">
</form>
```

The following example shows how you can trigger an event on `<input>` and capture it on the `<form>` element:

```javascript
const form = document.querySelector('form');
const input = document.querySelector('input');

// Create a new event with bubbling allowed
const event = new CustomEvent('name', {
    bubbles: true,
    detail: {
        text: () => input.value
    }
});

// Listen for `name` event on form
form.addEventListener('name', (e) => {
    console.log(`My name is ${e.detail.text()}`);
});

// Trigger `name` event from input when the user types
input.addEventListener('keyup', (e) => {
    e.target.dispatchEvent(event);
});
```