Home > Developer > Web Develop
What I never imagined was that the method mentioned in the JavaScript Advanced Programming (3rd Edition) was outdated. Later I looked at the MDN before I found the latest method.
Simulating mouse events
The MDN has been made very clear, although to keep backwards compatible mouseevent.initmouseevent () is still available, however, we should use MouseEvent ().
We use the following page to do the test
<! DOCTYPE html><Html><Headlang="ZH-CN" ><Metacharset="UTF-8" ><MetaName="Viewport"Content="Width=device-width, initial-scale=1"/><Title></Title><Style> . button{Width 200px;Height 200px;Background-color:Antiquewhite;Margin 20px;Text-align:CenterLine-height: 200px; }</Style></Head><Body><Divclass="Button" >button</Div><Script>"Use strict";var btn =document.queryselector ( ' click ', function (event" {console.log ( "OH~! You clicked Me~! '); }, false); var ev = new MouseEvent ( ' click ', { Cancelable: true, Bubble: true, view: window}); Btn.dispatchevent (EV); </script></ body></HTML> Open the page and, with the console open, you can see the console print a word that proves the simulation was successful.
As shown in the following:
Of course, there are a lot of properties to fill in when building this MouseEvent object, but maybe the few of the examples are more useful, and if you look at more properties, see the following address
(since MouseEvent inherits from Uievent and event, he also inherits their attributes)
Https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
Https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
Https://developer.mozilla.org/en-US/docs/Web/API/Event
To see the specific usage of the MouseEvent () constructor, see
Https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent
Simulating keyboard events
Open the console and reload the page, and you'll see the console print the letter ' a '
<! DOCTYPE html><Html><Headlang="ZH-CN" ><Metacharset="UTF-8" ><MetaName="Viewport"Content="Width=device-width, initial-scale=1"/><Title></Title><Style> . button{Width 200px;Height 200px;Background-color:Antiquewhite;Margin 20px;Text-align:CenterLine-height: 200px; }</Style></Head><Body><Divclass="Button" >button</Div><Script>"Use strict";var btn =document.queryselector ( "button"); document.addeventlistener ( ' KeyUp ', function (event) {console.log (string.fromcharcode (Event.keycode));}, false); var ev = new keyboardevent ( ' KeyUp ' , {keycode: 65}); document.dispatchevent (EV); </script></ body></HTML> The following is a detailed description of the KeyboardEvent
Https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
Custom events
There are two ways to customize events, one is to use the new event ()and the other is new Customevent ()
New Event ()
<! DOCTYPE html><Html><Headlang="ZH-CN" ><Metacharset="UTF-8" ><MetaName="Viewport"Content="Width=device-width, initial-scale=1"/><Title></Title><Style> . button{Width 200px;Height 200px;Background-color:Antiquewhite;Margin 20px;Text-align:CenterLine-height: 200px; }</Style></Head><Body><Divclass="Button" >button</Div><Script>"Use strict";var btn =Document.queryselector (var ev = new Event ( ' test ', {bubbles : ' true '}); Btn.addeventlistener ( ' test ', function (event) {console.log (event.bubbles); console.log (event.cancelable); console.log (Event.detail);}, false); Btn.dispatchevent (EV); </script></ body></HTML> The run effect is as follows, note that the value of event.detail is undefined
New Customevent ()
<! DOCTYPE html><Html><Headlang="ZH-CN" ><Metacharset="UTF-8" ><MetaName="Viewport"Content="Width=device-width, initial-scale=1"/><Title></Title><Style> . button{Width 200px;Height 200px;Background-color:Antiquewhite;Margin 20px;Text-align:CenterLine-height: 200px; }</Style></Head><Body><Divclass="Button" >button</Div><Script>"Use strict";var btn =Document.queryselector ('. Button ');var ev = new customevent (' test ', {bubbles: ' true ', cancelable: ' true ', detail: ' tcstory '}); btn. AddEventListener (' test ', function (event) { console.log (event.bubbles); Console.log (event.cancelable); Console.log (Event.detail);}, false); Btn.dispatchevent (EV); </script></body></html> Effects such as
It can be obvious that the new Customevent () is more than the new Event () the ability to carry custom data in the Event.detail attribute (the value of Event.detail is Tcstory), which is the difference.
Detailed description of Event ()
Https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
Detailed description of Customevent ()
Https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
It concludes that, in addition to simulating custom events, simulating mouse events and keyboard events may seem a bit of a pit and inconsistency. To simulate keyboard events.
Keyboardevent.key The document on the MDN is prompted for the recommended attribute, while Keyboardevent.keycode is said to be deprecated and should use the key property. However, when you go to the keyboardevent.key document, you will find that this property has no more browser support at all, and if you use this property, it's just a hole in the pit.
As shown, a large piece of scarlet letter
JS native create methods for simulating events and custom events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
