复合事宜
复合事宜是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>