"JavaScript Advanced Programming" events Chapter 02

Event Type

Specifies 5 events, UI events, mouse events, keyboard events, HTML events, change (mutation) events

UI Events

Contains Domactive, Domfocusin, Domfoucusout

Mouse events

Contains click, Dbclick, MouseDown (cannot be triggered by the keyboard), mouseout (cannot be triggered by the keyboard), mouseover (cannot be triggered by the keyboard), MouseUp (cannot be triggered by the keyboard), MouseMove (cannot be triggered by keyboard)

Event execution Order: MouseUp, MouseDown, Clik, MouseUp, MouseDown, DBCLICK,IE8 EuP, Clik, MouseUp, Dbclick)

Customer area coordinates location: ClientX, ClientY, indicating the horizontal and vertical coordinates of the mouse pointer in the viewport when the event occurs

Screen coordinate position: ScreenX, ScreenY, which represents the coordinate information of the mouse pointer over the entire screen

Modifier keys: Shift, Ctrl, Alt, meta,4 states Shiftkey, Ctrlkey, Altkey, Metakey

Related elements: Only for mouseover, mouseout two events, Relatedtarget in the event contains values, the others are Nul,ie does not support Relatedtarget, but MouseOver, Fromelement represents the related element, and when Mouseout, toelement represents the related element

mouse button: The button property of the event specifies 3 values: 0 for the primary mouse button, 1 for the mouse wheel, 2 for the secondary mouse button, IE provides a button 8 attribute values (0 1 3 5 7 corresponds to 0,2 6 corresponds to 2, 4 corresponds to 1)

Keyboard events

KeyDown: When the user presses any key on the keyboard to trigger, press and hold, repeatedly trigger

KeyPress: When the user presses the character key on the keyboard to trigger, press and hold to trigger repeatedly

KeyUp: When the user releases the key trigger on the keyboard

Key code: The KeyCode in the event, the value is the same as the ASCII in the corresponding lowercase letters or numbers of the same encoding

Character encoding: The CharCode in event, the value is the ASCII encoding represented by the pressed key. Detection mode is type Event.charcode = = ' Number '

TextInput event: Specified in the DOM3 level. This event is triggered when the user enters a character in an editable region. The difference between TextInput and keypress: The 1.keypress trigger element is any element that can get focus, while TextInput is an editable area, and 2.textInput is only triggered when the user presses a key that can enter the actual character, while KeyPress is pressing those that affect the text The key of this display is trigger (e.g. backspace)

HTML events

Contains the following types of events:

Load event: Load event, when the page, there are pictures, JS files, CSS files loaded, will not trigger the window Load event, binding method is Window.onload, one is the body of the OnLoad property

Unload event Unload: Triggered when a document is uninstalled completely

Resize event: will be triggered repeatedly

Scroll event: will be triggered repeatedly

Change events

Contains the following types of:

Domsubtreemodified-fires When a change occurs to the DOM structure. This is a catchall event, fires after any of the other events fire.

Domnodeinserted-fires after a node was inserted as a child of another node.

Domnoderemoved-fires before a node is removed from its parent node.

domnodeinsertedintodocument -fires After a node have been inserted either directly or by inserting the subtree in which it exists. This event fi res after domnodeinserted. This event has the been deprecated in DOM level 3 Events and should is not being used.

domnoderemovedfromdocument -fires before a node is removed either directly or by have the subtree in which it exists removed. This event fi res after domnoderemoved. This event has the been deprecated in DOM level 3 Events and should is not being used.

domattrmodified -fires When a attribute has been modifi ed. This event has the been deprecated in DOM level 3 Events and should is not being used.

domcharacterdatamodifieD-fires When a change was made to the value of a text node. This event has the been deprecated in DOM level 3 Events and should is not being used.

Proprietary events

ContextMenu event: Event.preventdefault (), Event.returnvalue = False Cancel default behavior

Beforeunload event: You need to set Event.returnvalue to a string to display to the user

MouseWheel event: Support bubble IE (document), Non IE (window), Wheeldelta, forward is a multiple of 120, backwards is a multiple of 120, opera 9.5 before the version, Wheeldelta the value of the sign is the opposite

Dommousescroll event: Firefox support, detail attribute-related information, forward is a multiple of 3, backward is a multiple of 3

Domcontentloaded event: Triggered after the DOM tree is generated, document, window support, can be processed using settimeout (function () {}, 0).

1 // Simulation of domcontentloaded 2 function (event) {3     if (Document.readystate = = ' Interactive ' | | document.readystate = = ' complete ') {4         Eventutil.removehandler (document, ' ReadyStateChange ', Arguments.callee); 5     }6 });

ReadyStateChange event: You can bind this event for document, simulate the Domcontentloaded event, readystate 5 properties, uninitialized (uninitialized), loading (loading), Loaded (loading complete), interactive (can manipulate objects), complete (finished)

1 //load external <script> <link>2Eventutil.addhandler (window, ' Load ',function(event) {3     varScript = document.createelement (' script ');4     5Eventutil.addhandler (script, ' ReadyStateChange ',function(event) {6event =eventutil.getevent (event);7         vartarget =Eventutil.gettarget (event);8         9         if(Target.readystate = = ' Loaded ' | | target.readystate = = ' complete ') {TenEventutil.removehandler (script, ' ReadyStateChange '), Arguments.callee); One         } A     }); -      -SCRIPT.SRC = ' A.js '; the document.body.appendChild (script); -});

Pageshow,pagehide events: Firefox and opera support the "round-trip cache" (Back-forward cache), which can save the state of the page for the browser's "forward" or "back" speed. Pageshow is triggered when the page is displayed, reload pageshow fires after load, and for Bfcache,pageshow, the target of the binding event is bound to the Window,pageshow event object that contains the persisted attribute. This property indicates whether the page exists in Bfcache, true is present, otherwise false. Pagehide triggers when the browser unloads the page, before unload. The event object of the Pagehide also contains the persisted property, true if the page is saved in Bfcache after unloading, or false.

Mobile Safari-supported events

Directional change events: The Orientationchange,orientation property contains 3 values, 0 for portrait mode, 90 for the left rotation mode (home button on the right), and 90 for the right rotation mode (home button on the left).

Touch event: Touchstart: Triggered when the finger touches the screen, Touchmove: the finger slides continuously on the screen, touchend: The finger moves away from the screen to trigger. The touch event contains 3 useful properties: touches: An array of touch objects that represent the touching operation of the current trace, targettouches: An array of touch objects specific to the event target, Changedtouches, Represents a Touch object array that has changed since the last touch. Touchmove The default behavior is to scroll the page. You can use Event.preventdefault to cancel the default behavior.

Gesture Event: Gesturestart: When one finger has been pressed on the screen, another finger touches the screen to trigger. Gestruechange: triggered when the position of any of the fingers of a touch is changed. Gestureend: Triggers when any one finger leaves the screen. The gesture event object contains rotation and scale,rotation that indicate the rotation angle caused by a finger change, a negative value that rotates counterclockwise, and a positive value that represents a clockwise rotation (starting at 0). Scale represents a change in two finger spacing, starting with 1.

Memory and Performance event delegates

Event delegates use event bubbling primarily to specify only one event handler to manage all events of a certain type. Advantages of binding Events for document: Document can be accessed quickly, as long as the clicked element appears, takes effect, consumes less memory, has fewer references to the DOM, and the dynamically added DOM binds the event.

Removing event handlers

Problem: The code that runs in the browser is associated with the JS that interacts with the page, and the empty event handler;

By innerHTML Deleting the DOM with the event, the bound event handler cannot be garbage collected.

Handling: Removes the event handler (onclick = null) before innerHTML, removes all event handlers before OnUnload, uses the event delegate, and uses the OnUnload event handler to mean that the page is not cached in Bfcache.

Simulating event simulations in the event DOM

Create an Event object using CreateEvent (), which receives a parameter, see below:

Uievents:ui Events

Mouseevents: Mouse Events

Mutationevents:dom Change Events

htmlevents:html Events

CreateEvent returns an event object that invokes the DOM's Dispatchevent (event) to trigger the events.

Entire process: CreateEvent, init, event initialization, dispatchevent trigger event

1 varBTN = document.getElementById (' mybtn '));2 varevent = document.createevent (' uievents ');3 4 //3 parameters, event type, whether bubbling, whether it can be canceled5Event.initevent (' click ',true,true);6 7Event.view =Document.defaultview;8Event.detail = 0;9Event.screenx = 0;TenEvent.screeny = 0; OneEvent.clientx = 0; AEvent.clienty = 0; - ... -Event.relatedtarget =NULL; the  -Btn.dispatchevent (event);

Event Simulation in IE

Create process: Createeventobject (), Initialize object->fireevent (event handler name, events)

1 varBTN = document.getElementById (' mybtn '));2 varevent =Document.createeventobject ();3 4 //3 parameters, event type, whether bubbling, whether it can be canceled5Event.initevent (' click ',true,true);6 7Event.screenx = 0;8Event.screeny = 0;9 ...TenEvent.clientx = 0; OneEvent.clienty = 0; A  -Btn.fireevent (' onclick ', event);

"JavaScript Advanced Programming" events Chapter 02