CustomEvent in DOM Level 3 and DOM Level 4
In DOM Level 3 Events, a new type of events, CustomEvent, is available. It extends the ordinary Event with a new detail property which you can use to provide extra information. With this new method you are able to create new types of events that you can use in your application.
To use the event, you use addEventListener, just as you do with click, mouseover, load etc. But instead of using those events that you are used to, you can name your event whatever you want, and then add a listener to any element on your page.
To start with, we need to have a web page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lab - CustomEvent</title>
</head>
<body>
<h1>CustomEvent</h1>
<div id="content">Lorem ipsum...</div>
<input type="button" id="magic" value="Click me!" />
<script src="scripts/customevents.js"></script>
</body>
</html>
The idea is that when we click on the button, I want to trigger a custom event that I have created, and which the div element (#content) is listening to.
The first thing we need now is to create the CustomEvent.
var customEvent = new CustomEvent('doMagic', {
detail: {
message: 'Click #'
}
});
customEvent is now a new instance of CustomEvent, which we can add listeners for. When the event is triggered, it will automatically call all event listeners and send not just the normal properties, it will also send detail.message in this case. The detail property is just a normal object, so we can add all data we think is useful there.
The next step is to listen for changes, so we will add a new listener to the content element.
var contentBox = document.getElementById('content');
var count = 0;
contentBox.addEventListener('doMagic', function (e) {
count++;
this.textContent = e.detail.message + count;
}, false);
Nothing strange here. When we trigger the doMagic event, we want to execute the function in the event listener, which will change the textContent in our div to the message that was sent to us, and apply the number of calls to the method.
The last step is to actually trigger the event.
var magicButton = document.getElementById('magic');
magicButton.addEventListener('click', function () {
contentBox.dispatchEvent(customEvent);
}, false);
I am listening for clicks on the button, and then trigger doMagic using the dispatchEvent method and send in the reference to the CustomEvent.
Custom events like this can be really useful, for example when building different controls where the developer using your control should be able to listen for specific changes, like folding out a dropdown menu. Libraries such as jQuery has this functionality built in already, but now you can listen for events in a standardized way using almost no extra code at all.
So what about browser compatibility? Actually, almost all modern browsers supports everything here (Chrome 15, Firefox 11, Opera 11.60 and Nightly builds of Safari according to MDN). IE 9 supports everything except from the use of the constructor, which is part of DOM Events Level 4. Take a look at the MSDN page for more information about support in IE. If you use the functionality as specified in the DOM Events Level 3 specification, all major browsers will be able to run your code.
You can find more info about this at: