What are Custom Events in JavaScript? How To Dispatch Custom Events

While writing javascript code for our application we write events like onclick event,onchange event when the user clicks on something or on some input change, There are number of built in events from javascript to perform some actions for e.g: on page scroll we want to show popup on website so a developer use scroll event from javascript and on the top of that event we write the code to show the popup, Now suppose if that popup contains some form, through that form we need to send data to server and if we have to receive form submission as sucess then we need to perfom some other actions , for these actions we need to write custome events.

With custom event we will learn How do I listen for triple clicks in JavaScript ? . which is a JavaScript Triple-Click Custom Event Listener so we can impliment a script that can detects Single, Double or Triple.

How to create a custom event in JavaScript ?

There are two methods to create custom events

1. Using the Event constructor
2. Using the CustomEvent constructor

There is one more way to create custom events that is document.createEvent ,  but most of the methods exposed by the object returned from the function have been deprecated.

Create custom events using the event constructor

const codeKeedaCustomEvents = new Event('codeKeedaCustomEvents ', {
  bubbles: true,
  cancelable: true,
  composed: false
})

In the above snippet, we created an event, codeKeedaCustomEvents , by passing the event name to the Event constructor. You can write event name in any case,it is case insensitive.

bubbles

The bubbles property determines whether the event should be propagated upward to its parent element. Setting this to true means that if the event gets dispatched in a child element, the parent element can also listen on the event and perform an action based on that. This is the behavior of most native DOM events, but for custom events, it is set to false by default.

If you only want the event to be dispatched at a particular element, you can stop the propagation of the event via event.stopPropagation(). This should be in the callback that listens on the event. The artical provides more details on this later.

cancelable

As the name implies, cancelable specifies that the event can also be cancelable .

Suppose we have a click event and you want to cancel the click event so it wont trigger further events attached to it,you can use event.preventDefault() in which by default cancelable is false however you can set it to true .

composed

It works in some of the SPA website built with react,angular and pure javascript where we have shadow DOM, so if you want to propagate a custom event outside of shadow DOM then you can make composed as true.

Using the CustomEvent constructor

const codeKeedaCustomEvents = new CustomEvent("codeKeedaCustomEvents ", {
  detail: {},
  bubbles: true,
  cancelable: true,
  composed: false,
});

The only difference between Using the CustomEvent constructor and event constructor is we can pass the data in CustomEvent constructor as detail: {}

How to dispatch Custom Events ?

The simple method to dispatch custom event is as below

document.querySelector("#someElement").dispatchEvent(codeKeedaCustomEvents);

Let Go through a simple example of creating custom event and dispatch that

we do not have any Triple click event by default in javascript , so let create a custom triple click event in javascript.

Simple Example

Custom Triple Click Events in javascript

Lets create a Click event listner on button on each click it will count no of click withing 500 milli seconds , so if a user click three time on a button within 500 milli seconds then it will considered as triple click, [;ease check the below code

 document.querySelector("button").addEventListener('click', function (event) {
        let countdown;

        function reset() {
            count = 0;
            countdown = null;
        }

        count++;

        if (count === 3) {
            if (!elements.has(event.target)) {
                elements.set(event.target, 1);
            } else {
                let currentCount = elements.get(event.target);
                currentCount++;
                elements.set(event.target, currentCount);
            }

           // here we will add code to dispatch custom event on triple click of button.
            reset();
        }

        if (!countdown) {
            countdown = window.setTimeout(function () {
                reset();
            }, 500);
        }
    });

on above code where we have commented here we will add code to dispatch custom event on triple click of button we will add a code to dispatch custome event as below

  let tripleClick = new CustomEvent('trplclick', {
                bubbles: true,
                detail: {
                    numberOfTripleClicks: elements.get(event.target)
                }
            });

            event.target.dispatchEvent(tripleClick);

So the combined code is as below

<script>
    let count = 0;
    let elements = new Map();

    document.querySelector("button").addEventListener('click', function (event) {
        let countdown;

        function reset() {
            count = 0;
            countdown = null;
        }

        count++;

        if (count === 3) {
            if (!elements.has(event.target)) {
                elements.set(event.target, 1);
            } else {
                let currentCount = elements.get(event.target);
                currentCount++;
                elements.set(event.target, currentCount);
            }

            let tripleClick = new CustomEvent('trplclick', {
                bubbles: true,
                detail: {
                    numberOfTripleClicks: elements.get(event.target)
                }
            });

            event.target.dispatchEvent(tripleClick);
            reset();
        }

        if (!countdown) {
            countdown = window.setTimeout(function () {
                reset();
            }, 500);
        }
    });
// event listner for tripple click.
    document.addEventListener('trplclick', function (event) {
        console.log(event)
        console.log('This element has been triple clicked', event.detail.numberOfTripleClicks, 'times');
    });

</script>

Adding button click Html code as below

<div class="button">
        <Button>Submit</Button>
      
    </div>

Demo (Click three time on button below )