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

Source: Internet
Author: User
Tags tagname

Composite events

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


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;

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="">


var inputname =document.getElementById ("Name");var value =document.getElementById ("Value");Inputname.addeventlistener ("Compositionstart", function () {// = "Red"; //value.value =; //}); Inputname.addeventlistener ( "Compositionupdate", function  () { =  "yellow"; //start editing, the background turns yellow value.value =; //the second textbox displays the character being edited}); Inputname.addeventlistener ( "Compositionend", function  () { = " White "; //Edit finished, the background becomes white value.value =; //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 ( 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 ( is the removed node, except that there is no other information in the event object), the event does not bubble back; DOMSubtreeModified Event ( 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>


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 =; 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 ( + "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 ( + "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 ( 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  () { =  "0em"; var hiding = setTimeout ( function  () { =-top +  "em";}, 3000); }, 0);} </SCRIPT>         

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.