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>