An event is a moment in a web page that deserves special attention. Events are often triggered by user actions or through other browser functions.
But few people know that it is also possible to use JavaScript to trigger a specific event at any time, just like the event created by the browser. That is, these events should bubble and still bubble, and still cause the browser to execute the event handlers it has specified to handle them. When testing Web applications, simulating trigger events is an extremely useful technique. The DOM2-level specification defines a way to simulate specific events for this, and is supported by IE9, Opera, Firefox, Chrome, and Safari. IE has its own way of simulating events.
13.6.1 Event Simulation in the DOM
Event objects can be created using the createEvent() method on the document object. This method accepts one parameter, a string representing the type of event to create. At DOM2 level, all of these strings are in the English plural, and at DOM3 they become singular. This string can be one of the following strings.
- UIEvents: Generalized UI events. Both mouse events and keyboard events inherit from UI events. In DOM3 level is UIEvent.
- MouseEvents: Generalized mouse events. In DOM3 level is MouseEvent.
- MutationEvents: Generalized DOM mutation events. In DOM3 level is MutationEvent.
- HTMLEvents: Generalized HTML events. There is no corresponding DOM3 level event (HTML events are spread out into other categories).
It should be noted that "DOM2-level events" did not specifically stipulate keyboard events, and later "DOM3-level events" were officially specified as an event. IE9 is currently the only browser that supports DOM3 level keyboard events. However, in other browsers, there are several ways to simulate keyboard events on top of existing methods.
After the event object is created, it needs to be initialized with information about the event. Each type of event object has a special method that initializes the event object by passing it the appropriate data. This method has a different name for different types, depending on the parameters used in createEvent().
The final step in simulating an event is to fire the event. This step requires the use of the dispatchEvent() method, which is supported by all DOM nodes that support events. When calling the dispatchEvent() method, you need to pass in a parameter, which is the event object that will trigger the event. Once an event is fired, it is listed as an "official event" and thus can still bubble up and trigger the execution of the corresponding event handler.
1. Simulate mouse events
You can simulate mouse events by creating a new mouse event object and assigning it the necessary information. The way to create a mouse event object is to pass the string "MouseEvents" to createEvent(). The returned object has a method called initMouseEvent() that specifies information about the mouse event. This method accepts 15 parameters, one for each typical property of the mouse event; the meanings of these parameters are as follows.
- type (string): Indicates the type of event to trigger, for example "click".
- bubbles (boolean): Indicates whether the event should bubble. To accurately simulate mouse events, this parameter should be set to true.
- cancelable (boolean): Indicates whether the event can be canceled. To accurately simulate mouse events, this parameter should be set to true.
- view (AbstractView): The view associated with the event. This parameter is almost always set to document.defaultView.
- detail (integer): Details about the event. This value is generally only used by event handlers, but is usually set to 0.
- screenX (integer): The X coordinate of the event relative to the screen.
- screenY (integer): The Y coordinate of the event relative to the screen.
- clientX (integer): The X coordinate of the event relative to the viewport.
- clientY (integer): The event's Y coordinate relative to the viewport.
- ctrlKey (Boolean): Indicates whether the Ctrl key is pressed. The default value is false.
- altKey (Boolean): Indicates whether the Alt key is pressed. The default value is false.
- shiftKey (Boolean): Indicates whether the Shift key is pressed. The default value is false.
- metaKey (Boolean): Indicates whether the Meta key is pressed. The default value is false.
- button (integer): Indicates which mouse button was pressed. The default value is 0.
- relatedTarget(object): Represents an object related to the event. This parameter is only used when simulating mouseover or mouseout.
Obviously, these parameters of the initMouseEvent() method correspond one-to-one with the properties contained in the event object of the mouse event. Of these, the first 4 parameters are critical to properly firing the event, because they are used by the browser; all the remaining parameters are only used in the event handler. When the event object is passed to the dispatchEvent() method, the target property of this object is automatically set. Below, we use an example to understand how to simulate the click event of the button.
var btn = document.getElementById("myBtn");
//create event object
var event = document.createEvent("MouseEvents");
//Initialize the event object
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
//trigger event
btn.dispatchEvent(event);
In a
DOM-compatible browser, other mouse events (such as dblclick) can be simulated in the same way.
2. Simulate keyboard events
As mentioned earlier, there is no provision for keyboard events in "DOM2-level events", so there is no ready-made idea to simulate keyboard events. Keyboard events were included in the draft for "DOM2-level events" but were removed before finalization; Firefox implements keyboard events according to its draft. It's important to draw your attention to the fact that the keyboard events in the "DOM3 level events" are very different from the keyboard events that were included in the "DOM2 level events" draft.
DOM3 level specifies that a keyboard event can be created by calling createEvent() and passing in "KeyboardEvent". The returned event object will contain an initKeyEvent() method that accepts the following parameters.
- type (string): Indicates the type of event to trigger, such as "keydown".
- bubbles (boolean): Indicates whether the event should bubble. Should be set to true for accurate simulation of mouse events.
- cancelable (boolean): Indicates whether the event can be canceled. Should be set to true for accurate simulation of mouse events.
- view (AbstractView ): The view associated with the event. This parameter is almost always set to document.defaultView.
- key (Boolean): The key code representing the key that was pressed.
- location (integer): Indicates where the key was pressed. 0 is the default main keyboard, 1 is left, 2 is right, 3 is a numeric keypad, 4 is a mobile device (i.e. virtual keyboard), and 5 is a handle.
- modifiers (string): A space-separated list of modifier keys, such as "Shift".
- repeat (integer): How many times this key was pressed in a line.
Since the use of keypress events is not recommended at DOM3 level, this technique can only be used to simulate keydown and keyup events.
var textbox = document.getElementById("myTextbox"),
event;
//Create event object in DOM3 level way
if (document.implementation.hasFeature("KeyboardEvents", "3.0")) {
event = document.createEvent("KeyboardEvent");
//Initialize the event object
event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0);
}
//trigger event
textbox.dispatchEvent(event);
Run it
This example simulates holding down Shift while pressing the A key. Before using document.createEvent
("KeyboardEvent"), you should check whether the browser supports DOM3-level events; other browsers return a non-standard KeyboardEvent object.
In Firefox, a keyboard event can be created by calling createEvent() and passing in "KeyEvents". The returned event object will contain an initKeyEvent() method that accepts the following 10 parameters.
- type (string): Indicates the type of event to trigger, such as "keydown".
- bubbles (boolean): Indicates whether the event should bubble. Should be set to true for accurate simulation of mouse events.
- cancelable (boolean): Indicates whether the event can be canceled. Should be set to true for accurate simulation of mouse events.
- view (AbstractView): The view associated with the event. This parameter is almost always set to document.default-View.
- ctrlKey (Boolean): Indicates whether the Ctrl key is pressed. The default value is false.
- altKey (Boolean): Indicates whether the Alt key is pressed. The default value is false.
- shiftKey (Boolean): Indicates whether the Shift key is pressed. The default value is false.
- metaKey (Boolean): Indicates whether the Meta key is pressed. The default value is false.
- keyCode (integer): The key code of the key that was pressed or released. This parameter is useful for keydown and keyup events, the default value is 0.
- charCode (integer): The ASCII encoding of the character generated by the keypress. This parameter is useful for keypress events, the default value is 0.
The keyboard event can be triggered by passing the created event object to the dispatchEvent() method, as shown in the following example.
// only for Firefox
var textbox = document.getElementById("myTextbox")
//create event object
var event = document.createEvent("KeyEvents");
//Initialize the event object
event.initKeyEvent("keypress", true, true, document.defaultView, false, false,
false, false, 65, 65);
//trigger event
textbox.dispatchEvent(event);
Running
the above code in Firefox will enter the letter A in the specified text box. Likewise, keyup and keydown events can be simulated accordingly.
In other browsers, you need to create a generic event, and then add keyboard event-specific information to the event object.
E.g:
var textbox = document.getElementById("myTextbox");
//create event object
var event = document.createEvent("Events");
//Initialize the event object
event.initEvent(type, bubbles, cancelable);
event.view = document.defaultView;
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.metaKey = false;
event.keyCode = 65;
event.charCode = 65;
//trigger event
textbox.dispatchEvent(event);
The above code first creates a general event, then calls initEvent() to initialize it, and finally adds the specific information of the keyboard event to it. Generic events must be used here, not UI events, because UI events do not allow adding new properties to the event object (except Safari). Simulating events like this will trigger keyboard events, but will not write text to the textbox, due to the inability to accurately simulate keyboard events.
3. Simulate other events
While mouse events and keyboard events are the most frequently simulated events in browsers, there are times when mutating events and HTML events need to be simulated as well. To simulate a mutation event, use createEvent("MutationEvents") to create a mutation event object with an initMutationEvent() method. The parameters accepted by this method include: type , bubbles , cancelable, relatedNode, preValue, newValue, attrName and attrChange. Let's look at an example of simulating a change event.
var event = document.createEvent("MutationEvents");
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","",0);
targ et.dispatchEvent(event);
The above code simulates the DOMNodeInserted event. Other change events can also be simulated in this way, as long as the parameters are changed.
To simulate HTML events, you also need to create an event object - via createEvent("HTMLEvents"), and then use the object's initEvent() method to initialize it, as shown in the following example.
var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
targ et.dispatchEvent(event);
This example shows how to simulate a focus event on a given target. The same is true for methods of simulating other HTML events.
Change events and HTML events are rarely used in browsers because their use is limited.
4. Custom DOM events
DOM3 level also defines "custom events". Custom events are not triggered natively by the DOM, their purpose is to let developers create their own events. To create a new custom event, call createEvent("CustomEvent"). The returned object has a method called initCustomEvent() that receives the following 4 parameters.
- type (string): The type of event to trigger, e.g. "keydown".
- bubbles (boolean): Indicates whether the event should bubble.
- cancelable (boolean): Indicates whether the event can be canceled.
- detail (object): any value, stored in the detail property of the event object.
Created custom event objects can be dispatched in the DOM like any other event. E.g:
var div = document.getElementById("myDiv"),
event;
EventUtil.addHandler(div, "myevent",
function(event) {
alert("DIV: " + event.detail);
});
EventUtil.addHandler(document, "myevent",
function(event) {
alert("DOCUMENT: " + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", "3.0")) {
event = document.createEvent("CustomEvent");
event.initCustomEvent("myevent", true, false, "Hello world!");
div.dispatchEvent(event);
}
Running
this example creates a bubbling event "myevent". The value of event.detail is set to a simple string, and the event is listened for on the <div> element and the document. Because the initCustomEvent() method has specified that the event should bubble, the browser is responsible for bubbling the event up to the document.
Browsers that support custom DOM events are IE9+ and Firefox 6+.
13.6.2 Event Simulation in IE
Simulating events in IE8 and earlier is similar to simulating events in the DOM: first create an event object, assign it the appropriate information, and then use that object to trigger the event. Of course, IE implements each step differently.
Call the document.createEventObject() method to create an event object in IE. But unlike the DOM approach, this method takes no arguments and returns a generic event object as a result. Then, you have to manually add all the necessary information for this object (there is no method to assist in this step). The final step is to call the fireEvent() method on the target, which takes two parameters: the name of the event handler and the event object. When the fireEvent() method is called, the srcElement and type attributes are automatically added to the event object; other attributes must be added manually. In other words, emulating any IE-supported event follows the same pattern. For example, the following code simulates triggering the click event procedure on a button.
var btn = document.getElementById("myBtn");
//create event object
var event = document.createEventObject();
//Initialize the event object
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//trigger event
btn.fireEvent("onclick", event);
Running
this example creates an event object and then initializes it with some information. Note that you can add properties to the object at will without any restrictions - even if the properties added are not supported by IE8 and earlier. Properties added here have no effect on events, as they are only used by event handlers.
The same pattern can also be used to simulate triggering the keypress event, as shown in the following example.
var textbox = document.getElementById("myTextbox");
//create event object
var event = document.createEventObject();
//Initialize the event object
event.altKey = false;
event.ctrlKey = false;
event.shiftKey = false;
event.keyCode = 65;
//trigger event
textbox.fireEvent("onkeypress", event);
Give it a run.
Since mouse events, keyboard events, and other events don't have different event objects, you can use a generic object to trigger any type of event. However, just as with simulating keyboard events in the DOM, running this example will not see any characters in the textbox due to the simulated keypress, even if the event handler is fired.