Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the Javascript event simulation". In the daily operation, I believe that many people have doubts about the Javascript event simulation. The editor consulted all kinds of data and sorted out the simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what is the Javascript event simulation?" Next, please follow the editor to study!

Events are used to describe a particular interesting moment in a web page. It is well known that events are usually triggered by the interaction between the user and the browser, but it is not true that specific events can be triggered at any time through Javascript, and these events are the same as the events created by the browser. This means that there will be appropriate event bubbles and the browser will execute the assigned event handler. This capability is very useful when testing web applications, providing a way to simulate specific events in the DOM level 3 specification, which is supported by both IE9 chrome FF Opera and Safari, and has its own way of simulating events in IE browsers of IE8 and previous approaches.

Javascript event simulation

A) Dom event simulation can create an event object at any time through the createEvent () method on document. This method accepts only one parameter, that is, to create an event string for the event object, all strings are plural at the DOM2 level specification, and all strings are singular at the DOM level 3 event. All strings are as follows: UIEvents: general UI event Mouse events keyboard events are inherited from UI events, and UIEvent is used at the DOM 3 level. MouseEvents: a generic mouse event that uses MouseEvent at the DOM 3 level. MutationEvents: a common catastrophe event that uses MutationEvent at DOM level 3. HTMLEvents: a generic HTML event that has no equivalent at the DOM3 level. Note that ie9 is the only browser that supports DOM3-level keyboard events, but other browsers also provide other methods available to simulate keyboard events. Once an event object is created, information about the event is initialized, and each type of event has a specific method to initialize. After the event object is created, the dispatchEvent () method is used to apply the event to a specific dom node so that it supports the event. The dispatchEvent () event, which supports one parameter, is the event object you created.

B) Mouse event Simulation Mouse event can be simulated (mouse event object) by creating a mouse event object and giving him some relevant information. Create a mouse event by passing a string "MouseEvents" to the createEvent () method to create a mouse event object, then initialize the returned event object through the iniMouseEvent () method, which accepts 15 parameters. The parameters are as follows: type string type: the type of event to trigger, for example, '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 cancelled. For mouse event simulation, this value should be set to true. View abstract view: the view granted by the event, this value is almost entirely document.defaultView. Detail int type: additional event information this initialization should generally default to 0. ScreenX int type: X coordinate screenY int type on the left side of the event distance screen: event distance y coordinate clientX int type on the upper side of the screen: event distance X coordinate clientY int type on the left side of the visual area: y coordinate ctrlKey Boolean type on the event distance visual area: indicates whether the ctrol key is pressed or not, the default is false. AltKey Boolean type: indicates whether the alt key is pressed or not. The default is false. ShiftKey Boolean type: indicates whether the shift key is pressed or not. The default is false. MetaKey Boolean type: indicates whether meta key is pressed. The default is false. Button int type: represents the mouse button that is pressed. The default is zero. RelatedTarget (object): the object associated with 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, in which the first four parameters are used by the browser, only the event handler uses other parameters, and when the event object is passed as a parameter to the dispatch () mode, the target property will be automatically assigned a value. Here is 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, 0, null); btn.dispatchEvent (event)

In browsers implemented by DOM, 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 removed from the DOM2-level events. At first, in the draft version of DOM2-level events, keyboard events were removed as part of the draft, but in the final version, FF has implemented keyboard events in the draft version. It is worth noting that the keyboard events implemented in DOM3-level events are still very different from those in the draft version of DOM2-level events. Create a keyboard event object in the dom3 event through the createEvent () method, and pass in the KeyBoardEvent string as a parameter. For the returned event object, call the initKeyBoadEvent () method to initialize the keyboard event. The parameters for initializing the keyboard event are as follows: type (string)-the type of event to be triggered, such as "keydown". Bubbles (Boolean)-indicates whether the event should bubble. Cancelable (Boolean)-indicates whether the event can be cancelled. View (AbstractView)-View of the event to be granted. The usual value is: document.defaultView. Key (string)-the code. Location (integer) of the pressed key-the location of the pressed key. 0: default keyboard, 1 left position, 2 right position, 3 numeric keypad area, 4 virtual keyboard area, or 5 game controller. Modifiers (string)-A list of modifiers separated by spaces. Repeat (integer)-the number of times a key is pressed in a row. Note that in the DOM3 event, the keypress event is wasted, so you can only simulate the keydown and keyup events on the keyboard in the following way.

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'), initialized by initKeyEvent (), which 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 one that was awarded the event is the graph. The usual value is: document.defaultView. CtrlKey (Boolean)-indicates whether the ctrol key is pressed or not. Default false. AltKey (Boolean)-indicates whether the alt key is pressed. Default false. ShiftKey (Boolean)-indicates whether the shift key is pressed. The default false. MetaKey (Boolean)-represents whether the metastatic key is pressed. Default false. KeyCode (integer)-the key code corresponding to the key when the key is pressed or released. The default is 0; charCode (integer)-the ASCII code corresponding to the character of the key pressed. The default for the common keypress event is 0. 0.

D) simulating other events mouse and keyboard events are the longest simulated events in the browser, but sometimes you also need to simulate abrupt events and HTML events. You can use createEvent ('MutationEvents') to create a catastrophe event object, and you can initialize the event object with initMutationEvent (). The parameters include type, bubbles, cancelable, relatedNode, prevValue,newValue, attrName, and attrChange. You can simulate an abrupt event in the following ways:

Var event = document.createEvent ('MutationEvents'); event.initMutationEvent ("DOMNodeInserted", true, false, someNode, "", 0); target.dispatchEvent (event)

For the HTML event, go directly to the code.

Var event = document.createEvent ("HTMLEvents"); event.initEvent ("focus", true, false); target.dispatchEvent (event)

Abrupt events and HTML events are rarely used in browsers because they accept application restrictions.

E) Custom DOM events define a class of events in DOM3-level events called custom event, which I call customer events. Customer events are not natively triggered by dom, but are provided directly, so that developers can create their own events, you can create their own customer events, 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. I'm just throwing a brick to attract jade here.

F) event emulation from IE8 in IE, 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, the process in which IE completes these steps is different. First of all, different from the method of creating event object in dom, IE uses the document.createEventObject () method, and has no parameters, and returns a general event object. Next, to assign a value to the returned event object, ie does not provide an initialization function, so you can only use physical methods to assign values one by one. Finally, the fireEvent () method is called 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 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. Note that the assignment of the event properties is unordered, and these property values are not very important to the event object, because only the corresponding handler (event handler) of the event handle will use them. There is no difference between event objects that create 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 an keypress simulation event does not appear as a character in textbox, even if the corresponding event handler has been triggered. Compared with DOM event simulation, I think IE event simulation is easier for people to remember and accept, and a unified event model can bring some convenience.

At this point, the study of "what are the Javascript event simulations" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.