On JavaScript event Simulation

Events are used to describe a particular interesting moment in a Web page, and a well-known event is usually triggered when the user interacts with the browser, but in fact, JavaScript can trigger specific events at any time, and these events are the same as the events created by the browser. This means that there will be an appropriate event bubbling, and the browser will execute the assigned event handler. This ability is very useful when testing Web applications, and provides a way to simulate specific events in the DOM 3 level specification, IE9 Chrome FF Opera and Safari all support this way, in IE8 and previous ways IE browser has his own way to simulate events
A) Dom event simulation
You can create an event object at any time by using the CreateEvent () method on document, which takes only one parameter, creating an event string for the event object, and all the strings in the DOM2 level specification are in the plural form, in the DOM All strings on level 3 events are in the singular form, with all strings as follows:
Uievents: Common UI events, mouse event keyboard events are inherited from UI events, and are used at DOM Level 3 as Uievent.
Mouseevents: Common mouse events, using MouseEvent at DOM Level 3.
Mutationevents: Generic mutation event, using Mutationevent at DOM Level 3.
Htmlevents: Generic HTML event, not equivalent at DOM3 level.
Note that IE9 is the only browser that supports DOM3-level keyboard events, but other browsers also provide other methods available to emulate keyboard events.
Once an event object is created, the information about the event is initialized, and each type of event has a specific method to initialize, and after the event object is created, the event is applied to a specific DOM node by the Dispatchevent () method so that it supports the event. This dispatchevent () event, which supports a parameter, is the event object you created.
b) Mouse Event simulation
Mouse events can be modeled by creating a mouse event object (mouse event objects), and giving him some information about creating a mouse event by passing a string "mouseevents" to the CreateEvent () method to create a mouse event object, The returned event object is then initialized by the Inimouseevent () method, and the Inimouseevent () method accepts the 15 parameter, with the following parameters:
Type string: The type of event to trigger, such as ' click '.
Bubbles Boolean Type: Indicates whether the event should be bubbling, and the value should be set to true for mouse event impersonation.
cancelable BOOL Type: Indicates whether the event can be canceled, and the value should be set to true for mouse event impersonation.
View Abstract View: event-granting views, this value is almost entirely document.defaultview.
Detail int Type: Additional event information This should generally default to 0 when initialized.
ScreenX int Type: The x-coordinate of the event distance to the left of the screen
ScreenY int type: The y-coordinate of the event distance from the top of the screen
ClientX int Type: The x-coordinate of the event distance to the left of the visible area
ClientY int type: The y-coordinate of the upper edge of the event distance visible area
Ctrlkey Boolean type: Indicates whether the Ctrol key is pressed and the default is False.
Altkey Boolean type: Indicates whether the ALT key is pressed and the default is False.
Shiftkey Boolean type: Indicates whether the SHIF key is pressed and the default is False.
Metakey Boolean type: Indicates whether the META key is pressed and the default is False.
button int type: Represents the mouse button being pressed, default is 0.
Relatedtarget (object): The associated object of the event. Used only when simulating mouseover and mouseout.

It is worth noting that the parameters of initmouseevent () are directly matched with the event object, where the first four parameters are used by the browser, and only the event handlers are used for other parameters, when the event object is passed as a parameter to the dispatch () mode, The target property is automatically assigned the value. Here's an example,
var btn = document.getElementById ("mybtn");
var event = document.createevent ("mouseevents");
Event.initmouseevent ("Click", True, True, Document.defaultview, 0, 0, 0, 0, 0,false, False, False, FALSE, 0, NULL);
Btn.dispatchevent (event);
In a DOM-implemented browser, all other events include Dbclick, which can be implemented in the same way.
c) Keyboard Event simulation
It is important to note that keyboard events have been removed from the DOM2 level event, at first in the draft version of the DOM2 event, the keyboard event was part of the draft, but the final version was removed, and FF has implemented the keyboard event in the draft version, It is worth noting that keyboard events implemented in DOM3-level events are significantly different from the keyboard events in the DOM2 version of the event.
Creating a keyboard event object in a DOM3-level event is initialized by the CreateEvent () method, and by passing the KeyboardEvent string as a parameter to the returned event object, calling the Initkeyboadevent () method. There are several parameters for initializing keyboard events:
Type (String)-the type of event to trigger, such as "KeyDown".
Bubbles-Indicates whether the event should bubble.
Cancelable (Boolean)-Indicates whether the event can be canceled.
View (Abstractview)-the event being granted is a graph. The usual values are: Document.defaultview.
Key (String)-the code that corresponds to the pressed key.
Location (integer)-the position where the key is pressed. 0: Default keyboard, 1 left position, 2 right position, 3 numeric keypad area, 4 virtual keyboard area, or 5 gamepad.
Modifiers (string)-a list of modifiers separated by a space.
Repeat (integer)-the number of times a key in a row has been pressed.
Note that in the DOM3 event, the KeyPress event is lost, so you can only simulate KeyDown and KeyUp events on the keyboard in the following manner.
var textbox = document.getElementById ("MyTextBox"), event;
if (Document.implementation.hasFeature ("Keyboardevents", "3.0")) {
event = document.createevent ("KeyboardEvent");
Event.initkeyboardevent ("KeyDown", True, True, Document.defaultview, "a", 0, "Shift", 0);
}
Textbox.dispatchevent (event);

Under FF, you are allowed to create a keyboard event by using Document.createevent (' keyevents '), which initializes the method to Initkeyevent (), which accepts 10 parameters,
Type (String)-the type of event to trigger, such as "KeyDown".
Bubbles-Indicates whether the event should bubble.
Cancelable (Boolean)-Indicates whether the event can be canceled.
View (Abstractview)-the event being granted is a graph. The usual values are: Document.defaultview.
Ctrlkey (Boolean)-Represents whether the Ctrol key is pressed. False by default.
Altkey (Boolean)-Represents whether the ALT key is pressed. False by default.
Shiftkey (Boolean)-represents whether the SHIFT key is pressed. False by default.
Metakey (Boolean)-represents whether the META key is pressed. False by default.
KeyCode (integer)-key that corresponds to the key pressed or released. Default is 0;
CharCode (integer)-The ASCII code that corresponds to the character of the pressed key. is a common KeyPress event used by default is 0.
D) Simulate other events
Mouse events and keyboard events are the longest simulated events in the browser, but at some point you also need to simulate mutation events and HTML events. You can use CreateEvent (' mutationevents ') to create a mutation event object, which can be initialized with Initmutationevent (), with parameters such as type, Bubbles, cancelable, Relatednode, Prevvalue,
NewValue, Attrname, and attrchange. You can simulate a mutation event in the following way:
var event = document.createevent (' mutationevents ');
Event.initmutationevent ("domnodeinserted", True, False, Somenode, "", "", "", 0);
Target.dispatchevent (event);
For HTML events, go directly to the code.
var event = document.createevent ("htmlevents");
Event.initevent ("Focus", true, false);
Target.dispatchevent (event);
For mutation events and HTML events are rarely used in the browser because they are subject to application restrictions.
E) customizing DOM events
A class of events defined in the DOM3 level event called the custom event, which I call customer events, is not native to be triggered by the DOM, but is provided directly so that developers can create their own events, you can create one of their own customer events, Called by calling CreateEvent (' customevent ') to the returned event object, the Initcustomevent () method, which passes four parameters type,bubbles,cancelable,detail. PS: Little brother understand this part of the limited, here is just a point.
F) event simulation in IE
From IE8, as well as earlier versions of IE, mimic the way DOM simulates events: Create Event objects, initialize event information, and then trigger events. Of course, ie in the process of completing these several steps is different.
Instead of creating an event object in the DOM, IE takes the Document.createeventobject () method, has no parameters, returns a generic event object, and then assigns a value to the returned event object, when IE does not provide an initialization function. You can only take the physical method one assignment, and finally call the FireEvent () method on the target element with a parameter of two: the name of the event handler and the event object that was created. When the FireEvent method is called, the Srcelement and type properties of the event object will be automatically assigned, and others will need to be assigned manually. Take a look at the following example:
var btn = document.getElementById ("mybtn");
var event = Document.createeventobject ();
Event.screenx = 100;
Event.screeny = 0;
Event.clientx = 0;
Event.clienty = 0;
Event.ctrlkey = false;
Event.altkey = false;
Event.shiftkey = false;
Event.button = 0;
Btn.fireevent ("onclick", event);
This example creates an event object, and then initializes the event object with some information, noting that the assignment of the event properties is unordered, and that these property values are not important for the event object, because only the handler function (event handler) that corresponds to the events handle will use them. There is no difference between event objects that create mouse events, keyboard events, or other events, because a common event object can be triggered by any type of event.
It is worth noting that in the DOM's keyboard event simulation, the result of a KeyPress simulation event does not appear as a character in the textbox, even if the corresponding event handler has been triggered.
Compared with DOM event simulation, the individual feels that the event simulation of IE is easier to remember and accept, and the unified event model can bring some convenience.

On JavaScript event Simulation