Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 146

NOTE DRAG-AND-DROP SUPPORT

For elements that don't support drag-and-drop functionality by default, the default event
mechanism must be canceled. This is why event . returnValue is set to false.

Creating custom events
DOM events provide a great deal of functionality. In some cases, you might want to create
a custom event to use more generically. To create a custom event, you use the CustomEvent
object.
To use custom events, you first need to create one by using the window.CustomEvent
object:

myEvent = new CustomEvent(
"anAction",
{
detail: { description: "a description of the event",
timeofevent: new Date(),
eventcode: 2 },
bubbles: true,
cancelable: true
}
);

The CustomEvent object constructor accepts two parameters:
■ The first parameter is the name of the event. This is anything that makes sense for what
the event is supposed to represent. In this example, the event is called anAction .
■ The second parameter is a dynamic object that contains a detail property that can
have properties assigned to it containing information that should be passed to the
event handler. Also, the parameter provides the ability to specify if the event should
bubble and whether the event can be canceled.
The next step is to assign the event to an element on the page by using the
addEventListener method:

document.addEventListener("anAction", customEventHandler);

Finally, the event is raised by using the dispatchEvent method:

document.dispatchEvent(myEvent);

A function called customEventHandler must exist for all this to work:

function customEventHandler() {
alert(window.event.detail.description);
}