The text event

Triggered when text is entered in text

  1. TextInput, a complement to keyPress, fires before text is inserted into the text box; The textInput event fires only in the editable area, and only when the actual character is entered
  • There is a data attribute that holds the characters actually entered
  • The inputMethod property indicates how text is entered into a text box
    • 0, which means the browser is not sure what it typed, right
    • 1: indicates keyboard input
    • 2, pasted in
    • 3. Drag and drop
    • 4. Use IME input
    • 5, the form selects a certain input
    • 6. Handwritten input
    • 7. Voice input
    • 8. Several combinations of inputs
    • 9. Script input

Keyboard events

Triggered when the user performs an action on the page via the keyboard

  1. Keydown: Triggered when the user presses any key on the keyboard. Holding down the key will trigger repeatedly
  2. Keypress: This event is triggered when the user presses a character key (or backspace) on the keyboard. This event is also triggered when the ESC key is held down repeatedly
  3. Keyup Triggered when the user releases a key on the keyboard

An event triggered when the user presses a character key

  • keydown
  • keypress
  • The first two are before the text box changes
  • keyup

attribute

  • KeyCode For alphanumeric character keys, the value of the keyCode attribute is the same as the encoding of the corresponding lowercase letter or number in the ASCII code

Synthetic events

It is said that there is not much support, so it is rarely triggered when entering characters for the IME (Input Method Editor, because there are thousands of Asian characters)

  1. Compositionstart: Triggered when the text composition system of the IME is opened, indicating that it is time to start typing
  2. Compositionupdate: Triggered when a new character is inserted
  3. Compositionend: Triggered when the text composition system of the IME is shut down, indicating a return to normal keyboard input status

Mutation event (on July 1st, I found that this event had been removed and DOM4 was replaced with mutation Observer)

// Check whether the browser supports change events
var isSupported = document.implementation.hasFeature("MutaionEvents"."2.0");
Copy the code

Triggered when the underlying DOM structure changes

  1. DOMSubtreeModified: Triggered when any DOM structure changes
  2. DOMNodeInserted: Triggered when a node is inserted as a child node into another node
  3. DOMNodeRemoved: Triggered when a node is removed from its parent
  4. DOMNodeInsertedIntoDocument: in a node is inserted into the document directly or indirectly by subtree is inserted into the document after the trigger. This event is emitted after DOMNodeInsert
  5. DOMNodeRemovedFromDocument: in a node is removed from the document directly or indirectly by subtree is removed from the document before the trigger. This event is triggered after DOMNodeRemoved
  6. DOMAttrModified: Triggered after a feature has been modified
  7. DOMCharacterDataModified: triggered when the text node values change

Remove a node from the DOM using removeChild() or replaceChild()

  • DOMNodeRemoved, the target of the event (event.target) is the deleted node, the event. RelateNode property contains a reference to the parent node of the target node, and the event can bubble
  • If you remove the node has child nodes, then in all of its child nodes and the nodes will trigger DOMNodeRemovedFromDocument events, but this event bubbling
  • DOMSubtreeModified, the target of this event is the parent node of the removed node


Insert-node trigger events insert nodes into the DOM using appendChild(),replaceChild(),insertBefore()

  • DOMNodeInserted, event.target Saves a reference to the parent node for the inserted node, event.relatenode property. When this event is triggered, the node has already been inserted into the new parent node. But the bubbling
  • DOMNodeInsertedIntoDocument, no bubble, the goal for the newly inserted node
  • DOMSubtreeModified, triggered on the parent node of the newly inserted node