JavaScript Event Correlation 3

1 keyboard events and text events2 a keyboard event: When the user taps on the keyboard will trigger keyboard events, DOM0 level of keyboard events, DOM3 level and re-regulate the keyboard events. DOM2 level originally has a keyboard event but heard before the finalization and deleted the relevant content, so so far also rely on the DOM0 level of keyboard events in operation, because the DOM3 level of keyboard events browser support degree differences compared to do cross-browser development is not easy, so the most reliable, It's also a DOM0-level keyboard event. 3 4 The DOM0 level has three keyboard events:5 1. KeyDown mouse to press that moment to trigger6 2. KeyPress the moment that the mouse presses a character key or that can affect the display of text content.7 3. KeyUp mouse lift that moment trigger8 9 KeyDown and KeyPress events are repeatedly triggered when the user presses and holds any key.Ten The KeyPress event is repeatedly triggered when the user presses a character key, or if it can affect the display of the text content . One  A keyboard events also supported: Shiftkey, Ctrlkey, Altkey, Meatkey's judgment. IE does not support Meatkey -  - Key code: the when the KeyDown KeyUp event occurs, the event object contains a KeyCode attribute that holds the value corresponding to a specific key on the keyboard.  - if a number or character is pressed, the keycode in this case contains an ASCII code corresponding to it.  - both DOM and IE support this property -  + each key code for your keyboard can be used in Google -  + But here's an exception: when you press the semicolon on the keyboard, ";" Different browser keycode values are not the same at this time.  AIn IE, safari,chrome in KeyCode:186 atIn Opera, FF KeyCode: - -  - character encoding: - CharCode Property - This property only has this property when the KeyPress event is triggered, and the value of this property holds the ASCII code that pressed the key.  - browsers that support this property are: Ie9,safari,chrome,ff in while IE6, IE7, IE8, and Opear are saved in keycode, they can be written as a compatibility function.  -  to if(typeof Event. CharCode = =" Number") { +     return Event. charcode; -}Else { the     return Event. KeyCode * } $ Panax Notoginseng attribute changes in the DOM3 level: - The charcode attribute is no longer included in the DOM3 level and the following two properties are added the 1. Key in order to replace the contained value of KeyCode is a string. What keys the user presses on the keyboard key to save the corresponding string.  +Saved when the user presses the character S"S"Saved when the user presses the SHIFT key"Shift" A  the 2.CharWhen you press a character, the value you save is the same as key, and the value that is saved when you press a non-character isNULL.  +  -Because Safari5and chrome support is the KeyIdentifier property $  $ so the compatibility difference between these three properties is too large, not recommended in cross-browser development use HA!!!  -  - There is also the Location property in the keyboard event object to determine where the user is located on the keyboard or the keyboard event triggered on a different device or virtual keyboard.  the but because of the poor compatibility is not recommended in cross-browser development use HA!!!  - WuyiText event: ie9+Safari and Chrome support the  - TextInput is a new event in the DOM3 level Wu This event is mainly used to replace the KeyPress event, the difference is: - 1This event is triggered when a character is entered in an editable region. About 2This event is triggered when the actual character is entered.  $  - Since this event is primarily about triggering when entering characters, there is a data property in the event object that is specifically used to hold the string of characters entered by the user.  - For example: - 1. When the user enters the uppercase"S", then the data is saved in uppercase."S", A 2. When the user enters a lowercase"s", then the data is saved in lowercase."s". +  the There is also a Inputmethod property in this event object that holds the numeric value, and the different values represent the text that the user entered in a different way . - such as pasting, dragging ... Wait a minute.  $  the however, because of poor compatibility, we do not recommend cross-browser development.  the  the Composite event: A new class of events in the DOM3 class to handle the IME input sequence. the IME can enter characters that are not found on a physical keyboard oh .... You usually need to hold down multiple character keys at the same time, but you can only enter one word Fuha!!!  - The following three composite events are available: in  the 1the. Compositionstart indicates that you want to start typing before triggering the  About 2. Compositionupdate to trigger when new characters are inserted in the input field the  the 3. Compositionend indicates the trigger when the input is complete the  + when these three events are triggered, the event object contains a data property that holds the input value at the time the event occurred.  -  theThe tragedy is ie9+.is the only browser that supports composite events so GG. Cross-browser or don't use it.Bayi  the Finally, let's look at a change event: the This event is a DOM2 level event. - The following properties are defined: -  the 1. Domsubtreemodified the 2. Domnoderemoved the 3. Domnodeinserted the 4. Domnodeinsertedintodocument events that do not bubble - 5. Domnoderemovedfromdocument events that do not bubble the 6. Domattrmodified the 7. Domcharacterdatamodified the 94can be obtained by dicument.implementation.hasFeature ("mutationevents","2.0") method to determine whether the browser supports this change event.  the  the when we pass RemoveChild, replacechild these two methods to delete the node the Triggers The following event before the node is deleted:98  About 1. Domnoderemoved - 2. Domnoderemovedfromdocument events that do not bubble101 3. Domsubtreemodified102 103When we pass AppendChild, ReplaceChild, Insetbefore these three ways to add/when replacing a node104 Triggers the following events after the node is added: the 106 1. Domnodeinserted107 2. Domnodeinsertedintodocument events that do not bubble108 3. Domsubtreemodified109  theExcept ie9+.All modern browsers support these three change events111 1. Domsubtreemodified the 2. Domnoderemoved113 3. Domnodeinserted the  the The rest does not consider!!!!!  the 117 It's here today! Because recently also read Zepto source so the energy is limited, not detailed place, only their own leak to fill the vacancy also welcome point! greatly appreciated. 118Of course, these notes are written only to let their learning to leave a little imprint, we hope that we can progress together!!!!119  -Good night

JavaScript Event Correlation 3