复合事件

复合事件是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>