JavaScript 事件——“事件類型”中“復(fù)合事件”和“變動事件”的注意要點

Meathill 發(fā)布于2019-08-19 17:24 / 2104人閱讀

摘要：復(fù)合事件復(fù)合事件是級事件中心添加的一類事件，用于處理的輸入序列。這個事件在之后觸發(fā)在一個節(jié)點被直接從文檔中移除，或通過子樹間接從文檔中移除之前觸發(fā)。最后一個觸發(fā)的事件是，觸發(fā)于新插入節(jié)點的父節(jié)點。

復(fù)合事件

復(fù)合事件是DOM3級事件中心添加的一類事件，用于處理IME的輸入序列。

compositionstart、compositionupdate、compositionend

復(fù)合事件有以下三中：

compositionstart：要開始輸入；

compositionupdate：插入新字符；

compositionend：復(fù)合系統(tǒng)關(guān)閉，返回正常鍵盤輸入狀態(tài)；

event.data

data屬性：

compositionstart訪問data：正在編輯的文本；

compositionupdate訪問data：正插入的新字符；

compositionend訪問data：插入的所有字符；

如：

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中的某一部分發(fā)生變化時給出提示。

主要有：

DOMNodeInserted：在一個節(jié)點作為子節(jié)點被插入到另一個節(jié)點中時；

DOMNodeRemoved：在節(jié)點從其父節(jié)點中被移除時；

DOMNodeInsertedIntoDocument：在一個節(jié)點被直接插入文檔，或通過子樹間接插入文檔之后觸發(fā)。這個事件在DOMNodeInserted之后觸發(fā)；

DOMNodeRemovedFromDocument：在一個節(jié)點被直接從文檔中移除，或通過子樹間接從文檔中移除之前觸發(fā)。這個事件在DOMNodeRemoved之后觸發(fā)；

DOMSubtreeModified：在DOM結(jié)構(gòu)中發(fā)生任何變化時觸發(fā)；

DOMAttrModified：在特性被修改之后觸發(fā)；

DOMCharacterDataModified：在文本節(jié)點的值發(fā)聲變化時觸發(fā)；

刪除節(jié)點DOMNodeRemoved事件

當(dāng)使用removeChild()或replaceChild()從DOM中刪除節(jié)點，首先觸發(fā)DOMNodeRemoved事件（event.target是被刪除的節(jié)點，event.relatedNode屬性包含對目標(biāo)節(jié)點父節(jié)點的引用，在這個事件觸發(fā)時，節(jié)點尚未從父節(jié)點中刪除，因此其parentNode屬性與event.relatedNode相同），這個事件會冒泡；其次繼而觸發(fā)DOMNodeRemovedFromDocument事件（event.target是被移除的節(jié)點，除此之外沒有別的信息在event對象中），這個事件不回冒泡；最后觸發(fā)DOMSubtreeModified事件（event.target是被移除的節(jié)點的父節(jié)點，除此之外沒有別的信息在event對象中）。

如：


    list item1
    list item2
    list item3

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添加一個新事件，當(dāng)檢測到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 目標(biāo)是li
    });

};
// list.addEventListener("DOMRemovedFromDocument", function() {
//     console.log("removed");
// });
list.addEventListener("DOMSubtreeModified", function() {
    console.log(event.target.tagName + " modified"); //UL modified 目標(biāo)是Ul
})

插入節(jié)點DOMNodeInserted事件

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節(jié)點時，首先會觸發(fā)DOMNodeInserted事件（event.target是被插入的節(jié)點，event.relatedNode是包含一個對父節(jié)點的引用，觸發(fā)這個事件時，節(jié)點已經(jīng)被插入到了新的父節(jié)點中），該事件冒泡；然后觸發(fā)DOMNodeInsertedIntoDocument事件，這個事件不冒泡，因此必須在插入節(jié)點之前為它添加這個事件處理程序。最后一個觸發(fā)的事件是DOMSubtreeModified，觸發(fā)于新插入節(jié)點的父節(jié)點。

下面是一個todoList：

style部分：

dom部分：