DOM Manipulation — Custom Events and Event Delegation
By: John Au-Yeung
Tags: Technology, JavaScript, Software Development, Programming, Web Development

Photo by Lukas Boekhout on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we’ve to know about the basics of it.

In this article, we’ll look at how to emit custom events, simulating mouse events, and event delegation.

Custom Events

We can emit custom events in our JavaScript code.

Th do that we can use the createEvent method and then use addEventListener to listen to the event.

For instance, if we have a button:

<button>

click me

</button>

We can write:

const button = document.querySelector('button');

const customEvent = document.createEvent('CustomEvent'); button.addEventListener('hello', (event) => {

console.log(event.detail.foo)

}, false); customEvent.initCustomEvent('hello', true, false, {

foo: 'bar'

}); button.dispatchEvent(customEvent);

We called createEvent to create a custom event. We pass in 'CustomEvent' to create a custom event.

Then we called initCustomEvent to initialize the custom event with data.

Next, we called dispatchEvent to trigger the event.

Then in the event handler we passed into addEventListener , we log the data which in the detail property.

So we get 'bar' when we access the foo property.

Simulating or Trigger Mouse Events

We can trigger mouse events by using the initMouseEvent method.

For instance, if we have:

<button>

click me

</button>

We can write:

const button = document.querySelector('button');

button.addEventListener('click', (event) => {

console.log(event);

}, false); const simulatedClick = document.createEvent('MouseEvents'); simulatedClick.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null, null); button.dispatchEvent(simulatedClick);

We called createEvent with the 'MouseEvents' .

Then we call the initMouse event with it. It takes many arguments.

They the arguments are in the following order:

type — type of mouse event we want to trigger

— type of mouse event we want to trigger canBubble — indicates whether the event bubbles or not

— indicates whether the event bubbles or not cancelable — indicates whether the event is cancelable or not

— indicates whether the event is cancelable or not view — the abstract view of the event, which should be window

— the abstract view of the event, which should be detail — click count

— click count screenX — the event’s x coordinate

— the event’s x coordinate screenY — the event’s y coordinate

— the event’s y coordinate clientX — the event client’s x coordinate

— the event client’s x coordinate clientY — the event client’s y coordinate

— the event client’s y coordinate ctrlKey — whether the Ctrl key is pressed during the event

— whether the Ctrl key is pressed during the event altKey — whether the Alt key is pressed during the event

— whether the Alt key is pressed during the event shiftKey — whether the Shift key is pressed during the event

— whether the Shift key is pressed during the event metaKey — whether the meta (Windows / Command) key is pressed during the event

— whether the meta (Windows / Command) key is pressed during the event button — mouse button

— mouse button relatedTarget — related event target

This is a deprecated API so other solutions should be considered.

Photo by Lutz Baumann on Unsplash

Event Delegation

We can use one event handler to listen to events originating from a different sources.

For instance, if we have:

<button>

button 1

</button>

<button>

button 2

</button>

<button>

button 3

</button>

We can write:

document.addEventListener('click', (event) => {

if (event.target.tagName.toLowerCase() === 'button') {

console.log(event.target.textContent);

}

}, false);

We listen to the click event on the whole page with document.addEventListener .

Then get the element where the event originated with event.target .

If we clicked a button, then we log the text content.

Conclusion

We can create custom events with client-side JavaScript code.

We can also simulate mouse events.

Also, we can use event delegation to use one event listener to listen to events from multiple sources.

JavaScript In Plain English

Did you know that we have four publications and a YouTube channel? Find them all at plainenglish.io and subscribe to our YouTube channel!