A brief discussion on Javascript event simulation_javascript skills

This means that the appropriate events will bubble up and the browser will execute the assigned event handlers. This ability is very useful when testing web applications. The DOM level 3 specification provides methods to simulate specific events. IE9 chrome FF Opera and Safari support this method. In IE8 and previous methods, IE browser has its own way to simulate events
a) Dom event simulation
You can create an event object at any time through the createEvent() method on the document. This method only accepts one parameter, which requires creating an event. The event string of the object. In the DOM2 level specification, all strings are in plural form. In DOM level 3 events, all strings are in singular form. All strings are as follows:
UIEvents: general UI events , Mouse events and keyboard events are all inherited from UI events, and UIEvent is used at DOM level 3.
MouseEvents: Universal mouse events, MouseEvent is used on DOM level 3.
MutationEvents: Universal mutation event, MutationEvent is used at DOM level 3.
HTMLEvents: Universal HTML events, there is no equivalent at DOM3 level.
Note that IE9 is the only browser that supports DOM3 level keyboard events, but other browsers also provide other available methods to simulate keyboard events.
Once an event object is created, the relevant information of the event must be initialized. Each type of event has a specific method to initialize. After the event object is created, the event is applied to the event through the dispatchEvent() method. On a specific dom node so that it supports this event. This dispatchEvent() event supports one parameter, which is the event object you created.
b) Mouse event simulation
Mouse events can be simulated by creating a mouse event object (mouse event object) and granting it some relevant information. Create a mouse event by passing a string to the createEvent() method" MouseEvents" to create a mouse event object, and then initialize the returned event object through the iniMouseEvent() method. The iniMouseEvent() method accepts 15 parameters. The parameters are as follows:
type string type: the type of event to be triggered, such as 'click' .
Bubbles Boolean type: Indicates whether the event should bubble. For mouse event simulation, this value should be set to true.
Cancelable bool type: Indicates whether the event can be canceled. For mouse event simulation, this value should be set to true.
View abstract view: The view granted by the event. This value is almost always document.defaultView.
Detail int type: Additional event information. This should generally default to 0 during initialization.
ScreenX int type: The X coordinate from the left side of the screen from the event
screenY int type: The y coordinate from the top of the screen from the event
clientX int type: The X coordinate from the left side of the visible area from the event
clientY int type : The y coordinate of the event distance above the visible area
ctrlKey Boolean type: Represents whether the ctrol key is pressed, the default is false.
　altKey Boolean type: represents whether the alt key is pressed, the default is false.
　shiftKey Boolean type: represents whether the shift key is pressed, the default is false.
MetaKey Boolean type: Represents whether the meta key is pressed. The default is false.
　Button int type: Represents the pressed mouse button, the default is zero.
　relatedTarget (object): The related object of the event. Only used when simulating mouseover and mouseout.

It is worth noting that the parameters of initMouseEvent() are directly mapped to the event object. The first four parameters are used by the browser. Only the event processing function uses other parameters. When the event object is passed as a parameter For the dispatch() method, the target attribute will be automatically assigned a value. The following is an example,

Copy code The code is as follows:

　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 DOM-implemented browsers, all other events, including dbclick, can be implemented in the same way.
c) Keyboard event simulation
It is worth noting that keyboard events have been moved out of DOM2-level events. Initially, in the draft version of DOM2-level events, keyboard events were included as part of the draft, but in the final version they were Moved out, FF has implemented the keyboard events in the draft version. It is worth noting that the keyboard events implemented in DOM3 level events are still very different from the keyboard events in the DOM2 level event draft version.
Creating a keyboard event object in a dom3 level event is through the createEvent() method and passing in the KeyBoardEvent string as a parameter. For the returned event object, call the initKeyBoadEvent() method to initialize it. The parameters for initializing the keyboard event are as follows: Each:
Type (string) - The type of event to be triggered, such as "keydown".
Bubbles (Boolean) — Represents whether the event should bubble.
Cancelable (Boolean) — Represents whether the event can be canceled .
　view (AbstractView) — The event is granted to the image. Usually the value is: document.defaultView.
　key (string) — The code corresponding to the pressed key.
　location (integer) — Pressed The position of the key. 0: Default keyboard, 1 left position, 2 right position, 3 numeric keyboard area, 4 virtual keyboard area, or 5 game controller.
　modifiers (string) — A space-separated modifier List.
Repeat (integer) — The number of times a key is pressed in a row.
Please note that in the DOM3 event, the keypress event is wasted, so in the following way, you can only simulate keydown and keyup events on the keyboard.

Copy code The code is as follows:

　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 keyboard events by using document.createEvent('KeyEvents'). The initialization method is initKeyEvent(). This method accepts 10 parameters,
type (string) — The type of event to be triggered, such as "keydown".
bubbles (Boolean) — Represents whether the event should bubble.
Cancelable (Boolean) — Represents whether the event can be canceled.
　view (AbstractView) — The event is granted to the picture. The usual value is: document.defaultView.
　ctrlKey (Boolean) — represents whether the ctrol key is pressed. The default is false.
　altKey (Boolean) — represents whether the alt key is pressed. The default is false. .
　shiftKey (Boolean) — represents whether the shift key is pressed. Default is false.
　metaKey (Boolean) — represents whether the meta key is pressed. Default is false.
　keyCode (integer) — key is pressed or released. The key code corresponding to the key. The default is 0;
CharCode (integer) — The ASCII code corresponding to the character of the pressed key. The default used by the keypress event is 0.
D) Simulate other events
Mouse events and keyboard events are the most commonly simulated events in browsers, but sometimes mutation events and HTML events also need to be simulated. You can use createEvent('MutationEvents') to create a mutation event object. You can use initMutationEvent() to initialize this event object. The parameters include type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, and attrChange. Yes Use the following method to simulate a mutation event:
var event = document.createEvent('MutationEvents');
event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","" ,0);
Target.dispatchEvent(event);
For HTML events, enter the code directly.
var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);
For mutation events and HTML events are rarely used in browsers because they impose application restrictions.
E) Customized DOM events
In DOM3 level events, a type of event is defined called custom event. I call it customer event. Customer event will not be triggered by DOM natively, but will be provided directly. As for developers who can create their own events, you can create your own customer event by calling createEvent('CustomEvent'), calling the initCustomEvent() method on the returned event object, passing four parameters: type, bubbles, cancelable , detail. ps: My understanding of this part is limited, so I am just giving some advice here.
F) Event simulation in IE
From IE8, and earlier versions of IE, they imitate the way DOM simulates events: creating event objects, initializing event information, and then triggering events. Of course, IE's process of completing these steps is different.
First of all, different from the method of creating event objects in DOM, IE uses the document.createEventObject() method and has no parameters. It returns a general event object. Next, you need to assign a value to the returned event object. At this time, IE does not provide For the initialization function, you can only use physical methods to assign values ​​one by one, and finally call the fireEvent() method on the target element with two parameters: the name of the event handler and the created event object. When the fireEvent method is called, the srcElement and type attributes of the event object will be automatically assigned, and the others will need to be assigned manually. Please see the following example:

Copy code The code is as follows:

　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. Note that the assignment of event attributes is unordered. For event objects, these attribute values ​​are not very Important, because only the handler function corresponding to the event handler will use them. There is no difference between creating an event object for mouse events, keyboard events, or other events, because a generic event object can be triggered by any type of event.
It is worth noting that in Dom's keyboard event simulation, the result of a keypress simulation event will not appear as characters in the textbox, even if the corresponding event handler has been triggered.
Compared with DOM event simulation, I personally feel that IE's event simulation is easier to remember and accept. A unified event model can bring some convenience.