JavaScript 事宜——“事宜范例”中“复合事宜”和“更改事宜”的注重要点

2024年4月14日 115次阅读 来源: JS菌

复合事宜

复合事宜是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>
    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004326310
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞