Advanced JavaScript by Zachary Shute

Author:Zachary Shute
Language: eng
Format: epub, azw3, mobi
Publisher: Packt Publishing
Published: 2019-01-30T16:00:00+00:00

Note

The event constructor works will all modern browsers except for Internet Explorer. For full compatibility with IE, you must use the createEvent() and initEvent() methods discussed later, or use a polyfill to simulate the CustomEvent class.

To maximize code browser compatibility, we must also discuss the initEvent() and createEvent() methods for creating custom events. These methods are deprecated and have been removed from the web standard. Some browsers, however, still support these functions. To create a custom event in an older browser, you must first create the event with var event = document.createEvent( 'Event' ) (we must use var instead of const in old browsers) and then initialize the new event with event.initEvent(). CreateEvent() takes in a single argument, type. This is the type of event object that will be created. This type must be one of the standard JavaScript event types, such as Event, MouseEvent, and so on. InitEvent() takes in three arguments. The first argument is a string that represents the type name of the event. For example, a click event's type is click. The second argument is a Boolean that represents the event's bubble behavior. The third argument is a Boolean that represents the event's cancelable behavior. These two behaviors were discussed in the Event Objects and Handling Events section of this topic.

To catch and handle custom events, we can use the standard event listener behaviors. All we need to do is attach an event listener with addEventListener() that listens for the custom event type that's been added. For example, if we create a CustomEvent with the event type myEvent, all we need to do to listen for that event is add an event listener on that type with addEventListener( 'myEvent', e => {} ). Whenever an event with the type myEvent is fired, the added event listener callback will be called.

When the event listener callback is called, the event parameter in the callback will have an additional field, detail. This field will contain the information passed in to the custom event through the detail field of the custom event options object. Any information that's relevant to the custom event should be passed through the detail object. An example of the detail object is shown in the following snippet:

const element = document.getElementById( 'button' );

element.addEventListener( 'myClick', e => {

console.log( e.detail );

} );

const event = new CustomEvent( 'myClick' , { detail: 'Hello!' } );

const canceled = element.dispatchEvent( event );

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.