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

  • A+
所属分类: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>

 

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: