JavaScript Event Correlation 4

1 continue with JavaScript event-related learning gogogo!!!! 2 3 HTML5 Event:4 5     1. ContextMenu Event Context Menu Event6 7 usually when we press the right mouse button, we will automatically pop up a context menu bar, but sometimes we do not want to appear the system comes with the default context menu bar8 we'd rather stop it and pop up our custom menu bar. 9 Ten so there's a ContextMenu event for us to use to block the default menu and implement our own right-click context menu.  One since the ContextMenu event can be bubbling, we can define this event on the document to handle all the similar events on the page.  AIn a DOM-compatible browser, we can use theEvent. Preventdefault () to block this default event, -In IE we still use Event.returnvalue =falseto block this default event.  -  the because ContextMenu is actually a mouse class event, in the event object, it contains the mouse coordinates (position) when the right mouse button is currently clicked . - we can take this to show our custom context menu Oh!!!  -  -Browsers that support this event are: IE, FF, Chrome, opear One+, Safari +  -     2This event is triggered before the. Beforeunload Event page is unloaded +  A This event will be triggered before the browser is uninstalled in order to not let the user leave the current page immediately, when the user leaves the current page, a pop-up box, at Let the user choose whether to leave the page or continue using the current page.  -We can customize the contents of the popup by adding the event object'sEventthe value of. ReturnValue is set to: the string we want to display to the user. Also returned as the return value of the function. (Currently only: Safari, Chrome) support.  -  -     3. domcontentloaded Events -  - This means that the event is triggered when the DOM content is loaded.  in the Load event of window is triggered when everything is loaded (including dom,js files, CSS files, pictures, all external resources).  - However, this process may cause the user to be unable to interact with the page because the resource is too large, so as to let the user interact with the page earlier. toThere are events that are triggered before the load event, that is, events that only require the DOM to load and that do not require all the resources to be loaded to operate and interact. Domcontentload!!!! +  - This event handler can be specified for document, window, and the event will bubble to window. This event is typically triggered before the Load event.  the  *Browsers that support this event are ie9+, FF, Chrome, opear9+, Safari3,1+.  $ Panax Notoginseng in browsers that do not support domcontentload events, we can replace them with other methods, which we'll talk about later.  -  the     4. ReadyStateChange Events +  A IE provides an interface to this event for a subset of the elements in the DOM document, and all elements that support this event have a readystate attribute.  the This property contains the following 5 values: +  -             1. Uninitialized (uninitialized) $             2. Loading (loading in progress) $             3. Loaded (load complete) -             4. Interactive (can interact with) -             5. Complate (completed) the but not every object goes through these processes in turn, and some skip over a few processes and jump directly to complate.  -             Wuyi in these phases, the interactive and domcontentload events are triggered in a similar time to the representative has been able to let users interact!!!  the  - when used with the Load event, it is difficult to guarantee the order in which two events are executed. It's possible, first, and possibly later. The main still depends on the size of the page's resource load.  Wu so at the time of triggering the element's ReadyStateChange event we have to get the user to interact with the page as early as possible by judging the value of the ReadyState property.  -  About             if(Document.readystate = ='Interactive'||document.readyState.complate) { $ dosomething .... -             } -  - This interface is deployed on both the script element and the link element to determine if the external resource is loaded!!!!  A  +     5. Pageshow, Pagehide events the  -FF and Opear have a feature called "Round-trip caching", also called"Bfcache" $ This means that when the user through the browser "forward" and "back" button can let the page from the cache red read the page so that the page can be loaded quickly in!!  the Bfcache actually saves the entire page in memory including page data, DOM, JavaScript status!.  the If the page does not trigger the Load event when it is read from Bfcache.  the  the Let's talk about the Pageshow event: - This event is triggered when the page is displayed, meaning that the event is triggered whenever the page is read from Bfcache, or if it is displayed again after a refresh.  in The Pageshow event is triggered after the load event.  the This event must be added to the window.  theOne of the event objects of the Pageshow events is called"persisted"of the Properties About This property holds a Boolean value in the Pageshow event object, theIf the page is stored in Bfcache, then this property value is true, and vice versa.false.  the  the The pagehide event is triggered before the page is unloaded, and it is triggered before the Unload event, and the event handler is added to the window.  +There is also a Boolean value in this event object that holds the"persisted"Properties, -When the page is about to be saved to Bfcache, the value of this property istrue, the reverse isfalse.  the BayiThe browsers that support these two events are: ie9+, FF, Chrome, opear9+, safari5+ the  the     6. Hashchange Events - The main event is that when the URL parameter list changes, all characters after the url# are changed to inform the developer.  - This event must be bound on the Window object theBrowsers that support the Hashchange event are: ie8+, FF, Chrome, Opear10.6+, safari5+ the  the in FF, Chrome, opear the event object that triggers the Hashchange event will contain Oldurl, and newurl Two attributes indicate the URL before the hash value is changed. the and the changed URL.  -  the It is better to use Location.hash to get the hash value.  the  the But before we use it, we'd better check if the current browser supports HASHCHANGE events!!! 94  the Device Events: the  the     1. Orientationchange Events98  About This event is an event that Apple adds to the mobile Safari browser to let developers know whether the current user is using a mobile device as a horizontal or vertical screen. - and the direction of the horizontal screen is whether the home key is left or right. 101 102 This event is triggered when the user changes the view mode of the mobile device, but there is no valuable information in the event object, only the window.orientation is saved in the103 the relevant 3 values. 104  the         0: Indicates that the mobile device is in portrait mode at this time. 106          -: Indicates that the mobile device is in landscape mode at this time, and the home key is on the right. 107- -: Indicates that the mobile device is in landscape mode at this time, and the home key is on the left. 108 109 all iOS devices support Orientationchange events and window.orientation.  the 111     2. Mozorientation Events the 113 FF3.6 also introduces similar event Moz prefixes that represent unique events.  the This event is triggered when the device's accelerometer detects that the device is changing direction, and this event must be added to the Window object.  theWhen this event is triggered, the event object contains X, Y, z three properties whose values are in-between 1 and 1, which represents the direction on a different axis.  theWhen x=0, y=0, z=at 1, the device is in portrait mode,117 If you tilt the device to the left, X will decrease and the x will increase. 118 119 only with acceleration remember the device supports this event Oh!!!  -     121     3. Deviceorienttation Events122 123 This event is similar to the Mozorientation event with the same support restrictions that are triggered on the Window object, and the difference is that the device is positioned in the 3-dimensional space over all directions. 124 When this event is triggered, the event object contains 5 properties: the 126         1. Alpha rotates around the z axis and is a0-floating-point number between 360! 127         2The. Beta rotates around the x-axis and is a-floating-point numbers from 180 to 180!  -         3. Gamma rotates around the y-axis and is a-floating-point numbers from 90 to 90! 129         4the. Absolute Boolean value that indicates whether the device returns an absolute value.  the         5. compasscalibrated, indicates whether the device compass has been proofread. 131The browsers that support this event are: IOS4.2+Safari, Chrome, amdroid version WebKit.  the     133     4. Devicemotion Events134 135 This event is mainly about telling us when the device is moving, what it is doing, and not just the direction. 136 For example:137         1The device is falling down at this point. 138         2the user is being held on the road. 139         .... $ 141 When this event is triggered, the event object contains the following properties:142 143         1. Acceleration this is an object with X, Y, Z, which tells you the acceleration in each direction without considering gravity!! 144         2. Accelerationincludinggravity this is an object that contains X, Y, Z, and tells you the acceleration in each direction in the case of the natural gravity of the axes!! 145         3. Interval represents the number of milliseconds146         4. Rotationrate an object that contains the direction: Alpha,beta,gamma. 147 148 we should first determine whether NULL is used when using these properties. 149The browsers that support this event are: IOS4.2+Safari, Chrome, amdroid version WebKit.  Max 151There is no specific details of the above events where there is no particular TD, you can Google for yourself.

JavaScript Event Correlation 4