Create a Custom JavaScript Event Without jQuery

Chris Love

Last Updated - Sat Jan 09 2021

There are dozens of standard events triggered by the browser based on user input, but sometimes the standard set of browser events just wont cut it for your application. Fortunately you can create your own custom events. I have read and probably shared several articles over the year about using custom jQuery events. But today I am going to demonstrate how to get down the metal and create a custom even without jQuery.

You may ask yourself, why would I ever need custom events, aren't the standard events enough? Eventually you should find yourself needing to employ something of an event driven programming model. For me it was creating a touch library and I wanted to essentially add a set of events to the core events. There have been other points in my AJAX lifestyle where I wanted to trigger events as the application ran to effectively hook into the process flow. Sometimes I solved them by declaring a callback method, other times I would rely on custom jQuery events.

Neither of those options felt right to me, partially because I am trying to wean myself away from jQuery dependence. Instead I want to get closer to the browser metal with the core API. I just happen to stumble upon the document.createEvent and related methods.

The createEvent method returns an event object based on a type passed. The type refers to the event module type. I wont get into the details of the event module types here, please read the Mozilla and W3C documentation for that. For a custom event you will most likely want to use the generic "Event" type.

The general pattern you need to follow it pretty simple. In my example I have a DIV element just to have a DOM element to play with and get a reference to it using the querySelector method. Next I create the custom event object by calling the document.createEvent method.

var node = document.querySelector(".my-node"), event = document.createEvent("Event");node.addEventListener("myEvent", function(e) { alert("the event fired!!");}, false);?event.initEvent("myEvent", false, false);event.target = node;node.dispatchEvent(event);

Next the event is initialized with the initEvent method. Here you need to pass the event's name, if it bubbles and is cancelable. The method initializes the properties for the event and you can then customize it as needed.

When you need to fire the event call the document.eventDispatch method, passing the event object. Any element, or the document that has bound an event handler to your custom event will execute its event handler. The event will bubble up through the DOM tree accordingly. So if you indicated the event wont bubble or the event propagation has been stopped it will not fire handlers up the tree, hopefully you get the idea.

So there is not a whole lot to it, it pretty simple. You can use this basic pattern to create your own event driven AJAX libraries.

I have a jsFiddle setup to demonstrate creating custom JavaScript events in the browser without jQuery.