Hey there! Have you ever wanted to handle a more complex interaction in your JavaScript code, beyond the typical click events and form submissions? Well, creating custom events is the way to go! It's a simple process, just one line of code, and in this article, I'm going to show you how to create custom events, how to listen for them, and give you an example of a double-click custom event. So let's get started!

Creating Custom Events

Creating a custom event in JavaScript is not as difficult as it may seem. Let's see how it's done.

const myEvent = new Event("myEvent")

To create a basic custom event in JavaScript, you can use the Event constructor and pass in a single string as the name of the event. To listen for this custom event, you can simply add an event listener to the element you wish to listen on.

document.addEventListener("myEvent", e => {
  console.log(e)
})

The final step in creating and using a custom event in JavaScript is to trigger the event that you have created and are listening for. Once you have set up the event and its listener, you can trigger the event using the dispatchEvent method on the element that the event is associated with.

document.dispatchEvent(myEvent)

Below you will see the fundamental structure of an event object in JavaScript.

{
  isTrusted: false
  bubbles: false
  cancelBubble: false
  cancelable: false
  composed: false
  currentTarget: null
  defaultPrevented: false
  eventPhase: 0
  path: [document, window]
  returnValue: true
  srcElement: document
  target: document
  timeStamp: 54.69999998807907
  type: "myCustomEvent"
}

The isTrusted property of an event object in JavaScript specifies whether the event was triggered by a user interaction or by custom JavaScript code. For instance, if a user clicks on a button, the isTrusted property of the event will be set to true, while a custom event triggered by JavaScript will have the isTrusted property set to false.

The target property of an event object refers to the element on which the dispatchEvent method was called.

The timeStamp property of an event object specifies the time elapsed since the page has been loaded when the event occurred.

The type property of an event object simply represents the name of the event.

Customizing the Event

If you look at the top of the event details, you may notice properties such as bubbles, cancelable, and composed. These properties can be customized when creating custom events to suit your requirements.

const myEvent = new Event("myCustomEvent", {
  bubbles: true,
  cancelable: true,
  composed: true
})

`cancelable`

The cancelable attribute of an event specifies whether the event can be canceled by invoking the e.preventDefault() method. Its default value is false, meaning that the event cannot be canceled. If the cancelable property is set to true, calling e.preventDefault() will result in setting the defaultPrevented property of the event to

be true.

`composed`

The composed attribute of an event controls whether it can propagate outside the shadow DOM. Its default value is false. This attribute is particularly relevant when working with custom HTML elements and the shadow DOM. Its purpose is to enable events to propagate from the shadow DOM to outside of it. If you need to make sure that an event triggered within the shadow DOM can be detected outside of it, you can set the composed attribute to true.

`CustomEvent`

When dealing with custom events, it is often necessary to pass custom data to the event handlers. The regular new Event constructor does not allow passing custom data to events, so an alternative approach is required to create custom events with custom data.

const myEvent = new CustomEvent("myEvent", { detail: { hello: "World" } })

You can use the CustomEvent constructor to create custom events with custom data. This constructor operates similarly to the new Eventconstructor but provides an additional argument where you can include a detail property along with the standard properties of cancelable, and composed. You can set the detail property to any value you want, and that data will be accessible to the event listener function.

const myEvent = new CustomEvent("myEvent", { detail: { hello: "World" } })

document.addEventListener("myEvent", e => {
  console.log(e.detail) // { hello: "World" }
})

document.dispatchEvent(myEvent)

Example

Our goal in this example is to implement a double click event that fires whenever a user clicks twice on an element within a brief interval. To achieve this, we will start by creating a click event listener that can detect whether a double click has taken place or not. Additionally, this listener will collect information on the total amount of time elapsed between the two clicks, which will be passed on as custom data.

const button = document.querySelector("button")

const MAX_DOUBLE_CLICK_TIME = 500
let lastClick = 0
button.addEventListener("click", e => {
  const timeBetweenClicks = e.timeStamp - lastClick
  if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {
    lastClick = e.timeStamp
    return
  }

  // TODO: Double click happened. Trigger custom event.
  lastClick = 0
})

In the above code, the timeStamp property is utilized to calculate the time difference between click events on a button. If the difference is greater than 500 milliseconds, the function returns immediately and updates the lastClick value. However, if the difference is less than or equal to 500 milliseconds, the function proceeds and triggers the double click event. To accomplish this, the code creates a custom event and dispatches it.

const doubleClickEvent = new CustomEvent("doubleClick", {
    bubbles: true,
    cancelable: true,
    composed: true,
    detail: { timeBetweenClicks },
  })
  e.target.dispatchEvent(doubleClickEvent)

When creating the custom event for the double click, we set all options to true to ensure that it behaves like a normal click event. Additionally, we pass the timeBetweenClicks data to the detail option. Finally, the event is dispatched on the target element, which in this case is the button. To complete the implementation, we simply need to add a listener for the custom event.

const button = document.querySelector("button")

button.addEventListener("doubleClick", e => {
  console.log("Double Click", e.detail.timeBetweenClicks)
})

const MAX_DOUBLE_CLICK_TIME = 500
let lastClick = 0
button.addEventListener("click", e => {
  const timeBetweenClicks = e.timeStamp - lastClick
  if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {
    lastClick = e.timeStamp
    return
  }

  const doubleClickEvent = new CustomEvent("doubleClick", {
    bubbles: true,
    cancelable: true,
    composed: true,
    detail: {
      timeBetweenClicks,
    },
  })
  e.target.dispatchEvent(doubleClickEvent)
  lastClick = 0
})

This listener will log the message "Double Click" to the console, along with the duration between the two clicks that triggered the custom event.

Conclusion

Custom events are a super cool way to handle interactions like double-clicking or gestures in JavaScript. The best part is that they're really easy to use!

With custom events, developers can create and dispatch their own events with custom data. This is great because it allows developers to create event types that are perfectly suited to their needs, and dispatch them on any element they want.

In a nutshell, custom events give developers a lot of flexibility when it comes to handling events. They're perfect for creating more sophisticated and responsive web applications. And the best part is that they're not hard to use at all!

Thank You!

I hope this blog post has been helpful to you and that you learned something new. I want to thank you from the bottom of my heart for sticking with me until the end of this post. Learning new things can be challenging, but it's so worth it in the end.

I wish you all the best as you continue on your learning journey, and I hope to see you back here soon! Take care and good luck! 💖

About