JavaScript events--Attention points for "composite events" and "Change events" in "Event Type" (GO)

Composite events

A composite event is a class of events added by the DOM3 event hubs to process input sequences of IMEs.

compositionstart、 compositionupdate、 compositionend

The composite event has the following three:

• Compositionstart: to start typing;

• Compositionupdate: inserting new characters;

• Compositionend: Composite system off, return to normal keyboard input state;

event.data

Data property:

• Compositionstart Access data: the text being edited;

• Compositionupdate Access data: The new character being inserted;

• Compositionend access to data: all characters inserted;

Such as:

<input type="text" id="name"><input type="text" id="value" value="">

Js:

var inputname =document.getElementById ("Name");var value =document.getElementById ("Value");Inputname.addeventlistener ("Compositionstart", function () {//inputName.style.backgroundColor = "Red"; //value.value = event.data; //}); Inputname.addeventlistener ( "Compositionupdate", function  () {InputName.style.backgroundColor =  "yellow"; //start editing, the background turns yellow value.value = Event.data; //the second textbox displays the character being edited}); Inputname.addeventlistener ( "Compositionend", function  () {InputName.style.backgroundColor = " White "; //Edit finished, the background becomes white value.value = Event.data; //the second textbox displays the final character entered});           

Change events (seemingly void a lot of change events, cross-browser bad, not recommended)

A change event that can be prompted when a part of the DOM changes.

Mainly include:

• Domnodeinserted: When a node is inserted into another node as a child node;

• Domnoderemoved: When a node is removed from its parent node;

• Domnodeinsertedintodocument: Triggered when a node is inserted directly into a document, or indirectly through a subtree. This event is triggered after domnodeinserted;

• Domnoderemovedfromdocument: Triggered before a node is removed directly from the document or indirectly removed from the document via a subtree. This event is triggered after domnoderemoved;

• Domsubtreemodified: Triggers when any change occurs in the DOM structure;

• Domattrmodified: Triggered after the feature has been modified;

• Domcharacterdatamodified: Triggered when the value of a text node is audible or altered;

Delete a node DOMNodeRemovedEvent

When a node is removed from the DOM using RemoveChild () or ReplaceChild (), the first trigger DOMNodeRemoved Event (Event.target is a deleted node, the Event.relatednode property contains a reference to the parent node of the target node, and when this event is triggered, the node has not been removed from the parent node, so its ParentNode property is the same as Event.relatednode), the event bubbles , followed by triggering the DOMNodeRemovedFromDocument event (Event.target is the removed node, except that there is no other information in the event object), the event does not bubble back; DOMSubtreeModified Event (Event.target is the parent node of the removed node, except that there is no other information in the event object).

Such as:

<ul id="list">    <li>list item1</li> <li>list item2</li> <li>list item3</li></ul>

Js:

VarList = Document.queryselector ("#list");Add a new event for each Li, and click to remove it;for (var i =0, Len =List.getelementsbytagname ("Li"). length; i < Len; i++) {List.getelementsbytagname ("Li") [I].addeventlistener ("click", function() {this.parentNode.removeChild (this);});}; //Add a new event to the list and change the CSS value list.addeventlistener ("domnoderemoved", function() { ) When DOM changes are detected. var style = Event.relatedNode.style; Style.border = "1px solid gray"; var x = setTimeout (function () {style.border = "1px solid White";}, + );});  

Another example:

var list =Document.queryselector ("#list");var item = List.getelementsbytagname ("Li");Add a new event for each Li, and click to remove it;for (var i =0; i < item.length; i++) {Item[i].addeventlistener ("Click",function() {This.parentNode.removeChild (this); }); Item[i].addeventlistener ("domnoderemoved", function() { //domnoderemoved event Console.log (Event.target.tagName + "going To be removed "); //li going to be removed target is LI});}; //List.addeventlistener ("Domremovedfromdocument", function () {///Console.log ("removed");  }); List.addeventlistener ("domsubtreemodified", function() { Console.log ( Event.target.tagName + "modified"); //ul modified target is UL})               

Inserting nodes DOMNodeInsertedEvent

When you insert a node into the DOM using AppendChild (), ReplaceChild (), or insertbefore (), the first trigger DOMNodeInserted Event (Event.target is the inserted node, Event.relatednode is a reference to the parent node, when the event is triggered, the node has been inserted into the new parent node), the event bubbles, and then the event is triggered DOMNodeInsertedIntoDocument , the event does not bubble, Therefore, you must add this event handler for the node before inserting it. The last event triggered is the DOMSubtreeModified parent node that is triggered on the newly inserted node.

Here is a todolist:

Style section:

<Style>*{Margin0;Padding0;Font-family:monospace;}Body{Background-color:#ccc;}#info{ColorWhiteWidth100%;Height1em;Padding0.3em;PositionAbsoluteTop-1.6em;}Li{Background-color:WhiteMargin-top:2EM;Padding1em;Width80%;Box-shadow: 2px2px2PX Gray;max-height: 20em; list-style-type:none; margin-left:auto; margin-right:auto; overflow:scroll;}  #btn { Margin-top:2em;} </STYLE>          

Dom section:

<Div id="Info" > <p class="Note" >infomation</p></Div ><input type="button" value="New Item" id="BTN" ><ul id="list" ></ul>            

JS section:

<ScriptType="Text/javascript" >Setting variablesvar list =Document.queryselector ("#list");var item = List.getelementsbytagname ("Li");var btn =document.getElementById ("BTN");var info =Document.queryselector ("#info");var note =Document.queryselector ("#info"). Queryselector (". Note");Add a new Task Btn.onclick =function() {Enter a new task stringvar newitemvalue = prompt ("Enter a new task");if (Newitemvalue = =null | | Newitemvalue = ="") {ReturnFalse }Create a new task listvar Newli =Document.createelement ("Li"); Newli.appendchild (document.createTextNode (Newitemvalue)) List.appendchild (NEWLI);Assigns the deletion function to the new task added Newli.addeventlistener ("DblClick",function() {This.parentNode.removeChild (this); });Assign the delete reminder function to the new task added Newli.addeventlistener ("Domnoderemoved",function() {Domnoderemoved Event Message ("Orangered",1.6,"deleted"); });};When the list adds a new task, issue a reminder List.addeventlistener ("Domnodeinserted",function() {Message ("Skyblue",1.6,"New Success");});When the UL Dom changes, send a reminder List.addeventlistener ("Domsubtreemodified",function() {Console.log ("Updated");//ul modified target is UL}) //message reminder function message var showing = SetTimeout ( function  () {info.style.top =  "0em"; var hiding = setTimeout ( function  () {info.style.top =-top +  "em";}, 3000); }, 0);} </SCRIPT>         

JavaScript Event--The note points for "composite events" and "Change events" in "Event Type" (GO)