JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点

复合事件

复合事件是DOM3级事件中心添加的一类事件，用于处理IME的输入序列。

compositionstart、compositionupdate、compositionend

复合事件有以下三中：

• compositionstart：要开始输入；

• compositionupdate：插入新字符；

• compositionend：复合系统关闭，返回正常键盘输入状态；

event.data

data属性：

• compositionstart访问data：正在编辑的文本；

• compositionupdate访问data：正插入的新字符；

• compositionend访问data：插入的所有字符；

如：

<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"; //开始编辑，背景变成黄色 value.value = event.data; //第二个textbox显示正在编辑的字符 }); inputName.addEventListener("compositionend", function () { inputName.style.backgroundColor = "white"; //编辑完毕，背景变成白色 value.value = event.data; //第二个textbox显示输入的最终字符 }); 

变动事件（貌似作废了很多变动事件，跨浏览器不好，不建议用）

变动事件，能在DOM中的某一部分发生变化时给出提示。

主要有：

• DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时；

• DOMNodeRemoved：在节点从其父节点中被移除时；

• DOMNodeInsertedIntoDocument：在一个节点被直接插入文档，或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted之后触发；

• DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除，或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发；

• DOMSubtreeModified：在DOM结构中发生任何变化时触发；

• DOMAttrModified：在特性被修改之后触发；

• DOMCharacterDataModified：在文本节点的值发声变化时触发；

删除节点DOMNodeRemoved事件

当使用removeChild()或replaceChild()从DOM中删除节点，首先触发DOMNodeRemoved事件（event.target是被删除的节点，event.relatedNode属性包含对目标节点父节点的引用，在这个事件触发时，节点尚未从父节点中删除，因此其parentNode属性与event.relatedNode相同），这个事件会冒泡；其次继而触发DOMNodeRemovedFromDocument事件（event.target是被移除的节点，除此之外没有别的信息在event对象中），这个事件不回冒泡；最后触发DOMSubtreeModified事件（event.target是被移除的节点的父节点，除此之外没有别的信息在event对象中）。

如：

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

js：

var list = document.querySelector("#list"); //为每一个li添加一个新事件，点击后被移除； for (var i = 0, len = list.getElementsByTagName("li").length; i < len; i++) { list.getElementsByTagName("li")[i].addEventListener("click", function() { this.parentNode.removeChild(this); }); }; //为list添加一个新事件，当检测到DOM变动的时候，改变css值 list.addEventListener("DOMNodeRemoved", function() { var style = event.relatedNode.style; style.border = "1px solid gray"; var x = setTimeout(function () { style.border = "1px solid white"; }, 1000); }); 

又如：

var list = document.querySelector("#list"); var item = list.getElementsByTagName("li"); //为每一个li添加一个新事件，点击后被移除； for (var i = 0; i < item.length; i++) { item[i].addEventListener("click", function() { this.parentNode.removeChild(this); }); item[i].addEventListener("DOMNodeRemoved", function() { //DOMNodeRemoved事件 console.log(event.target.tagName + " going to be removed"); //LI going to be removed 目标是li }); }; // list.addEventListener("DOMRemovedFromDocument", function() { // console.log("removed"); // }); list.addEventListener("DOMSubtreeModified", function() { console.log(event.target.tagName + " modified"); //UL modified 目标是Ul }) 

插入节点DOMNodeInserted事件

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时，首先会触发DOMNodeInserted事件（event.target是被插入的节点，event.relatedNode是包含一个对父节点的引用，触发这个事件时，节点已经被插入到了新的父节点中），该事件冒泡；然后触发DOMNodeInsertedIntoDocument事件，这个事件不冒泡，因此必须在插入节点之前为它添加这个事件处理程序。最后一个触发的事件是DOMSubtreeModified，触发于新插入节点的父节点。

下面是一个todoList：

style部分：

<style> *{ margin:0; padding:0; font-family: monospace; } body{ background-color:#ccc; } #info{ color:white; width:100%; height:1em; padding:0.3em; position:absolute; top:-1.6em; } li{ background-color:white; margin-top:2em; padding:1em; width:80%; box-shadow: 2px 2px 2px gray; max-height:20em; list-style-type:none; margin-left:auto; margin-right:auto; overflow:scroll; } #btn{ margin-top:2em; } </style> 

dom部分：

<div id="info"> <p class="note">infomation</p> </div> <input type="button" value="new item" id="btn"> <ul id="list"> </ul> 

js部分：

<script type="text/javascript"> //设置变量 var 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"); //添加新的任务 btn.onclick = function() { //输入新的任务字符串 var newItemValue = prompt("输入新的任务"); if (newItemValue == null || newItemValue == "") { return false; } // 创建新任务列表 var newLi = document.createElement("li"); newLi.appendChild(document.createTextNode(newItemValue)) list.appendChild(newLi); //为添加的新任务赋予删除功能 newLi.addEventListener("dblclick", function() { this.parentNode.removeChild(this); }); //为添加的新任务赋予删除提醒功能 newLi.addEventListener("DOMNodeRemoved", function() { //DOMNodeRemoved事件 message("orangered",1.6,"已删除"); }); }; //当list添加新任务时，发出提醒 list.addEventListener("DOMNodeInserted", function() { message("skyblue",1.6,"新建成功"); }); // 当Ul DOM改变时，发出提醒 list.addEventListener("DOMSubtreeModified", function() { console.log("updated"); //UL modified 目标是Ul }) //消息提醒 function message (color,top,infomation) { note.firstChild.nodeValue = infomation; info.style.backgroundColor = color; var showing = setTimeout(function () { info.style.top = "0em"; var hiding = setTimeout(function () { info.style.top = -top + "em"; }, 3000); }, 0); } </script>