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

Meathill 發布于2019-08-19 17:24 / 2117人閱讀

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

復合事件

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

compositionstart、compositionupdate、compositionend

復合事件有以下三中：

compositionstart：要開始輸入；

compositionupdate：插入新字符；

compositionend：復合系統關閉，返回正常鍵盤輸入狀態；

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

主要有：

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對象中）。

如：


    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添加一個新事件，當檢測到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部分：

dom部分：


    infomation

js部分：

GPU云服務器云服務器 js事件類型 vps日常維護中的一些要點總結 javascript的事件選云服務器的幾個注意和需求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78496.html

JavaScript 事件——“事件類型”中“UI事件”的注意要點

摘要：事件這個事件在文檔被完全卸載后觸發。事件當瀏覽器窗口被調整到一個新的高度或寬度，就會觸發該事件。事件該事件雖然在對象上發生的，但實際表示的是頁面中響應元素的變化。事件關于等事件以后再討論事件關于等事件以后再討論事件關于等事件以后再討論 DOM3級事件規定了一下幾類事件 UI事件，當用戶與頁面上的元素交互時除法；焦點事件，元素獲得或失去焦點；鼠標事件，通過鼠標在頁面上執行操作；滾...

sushi 2019-08-19 17:22 評論0 收藏0
JavaScript 事件——“模擬事件”的注意要點

DOM中的事件模擬三個步驟：首先通過document.createEvent()方法創建event對象，接收一個參數，即表示要創建的事件類型的字符串： UIEvents（DOM3中的UIEvent）鼠標和鍵盤事件； MouseEvents（DOM3中的MouseEvent）鼠標事件； MutationEvents（DOM3中的MutationEvent）變動事件； HTMLEvents（沒有...

BakerJ 2019-08-19 17:26 評論0 收藏0
高程3總結#第13章事件

摘要：所有節點中都包含這兩個方法，并且它們都接受個參數要處理的事件名，作為事件處理程序的函數和一個布爾值。和支持這個事件。事件事件流事件流描述的是從頁面中接收事件的順序事件冒泡 IE的事件流叫做事件冒泡，即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然后逐級向上傳播到較為不具體的節點showImg(https://segmentfault.com/img/bVbg5...

RyanQ 2019-08-23 12:03 評論0 收藏0
《JavaScript高級程序設計（第3版）》——事件（十三）

摘要：事件捕獲團隊提出的，與事件冒泡相反。事件處理程序事件用戶或瀏覽器自身執行的某種動作。事件處理程序響應某個事件的函數。事件委托目的解決事件處理程序過多問題。流程創建事件對象初始化事件對象觸發事件事件是將JavaScript與網頁聯系在一起的主要方式。事件流事件流：從頁面中接收到事件的順序。事件冒泡 IE的事件流叫做事件冒泡：事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點...

DandJ 2019-08-23 16:51 評論0 收藏0
JavaScript DOM 事件初探

摘要：級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。對象只存在于事件處理程序執行期間，一旦執行完畢，立即被銷毀。焦點事件焦點事件會在頁面元素獲得或失去焦點時觸發。 JavaScript DOM 事件初探原文鏈接事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間，比如單擊、雙擊、鼠標懸浮等。事件流事件流描述的是從頁面中接收事件的順序，或者說是事件在頁面中傳播...

Moxmi 2019-08-20 11:14 評論0 收藏0