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

Meathill 发布于2019-08-19 17:24 / 2074人阅读

摘要：复合事件复合事件是级事件中心添加的一类事件，用于处理的输入序列。这个事件在之后触发在一个节点被直接从文档中移除，或通过子树间接从文档中移除之前触发。最后一个触发的事件是，触发于新插入节点的父节点。

复合事件

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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