JavaScript高级程序设计48.pdf

设备中的键盘事件

任天堂Wii等设备可以通过键码知道用户按下了哪个键

复合事件

复合事件是DOM3级事件新添加的一类事件，用于处理IME的输入序列。IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符，IME通常需要同时按住多个键，但最终只输入一个字符，有3种复合事件

compositionstart:在IME的文本复合系统打开时触发，表示要开始输入了

compositionupdate:向输入字段插入新字符时触发

compositionend:在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态

复合事件与文本事件很相似，在触发复合事件时，目标接收文本的输入字段。但它比文本事件对象多一个属性data，其中包含以下几个值得一个：

如果在compositionstart事件发生时访问，包含正在编辑的文本（例如，已经选中的需要马上替换的文本）；

如果在compositionupdate事件发生时访问，包含正在插入的新字符；

如果在compositionend事件发生时访问，包含此次输入的所有字符

var textbox=document.getElementById("myText");

EventUtil.addHandler(textbox,"compositionupdate",function(event){

　　　　　　　　event=EventUtil.getEvent(event);

　　　　　　　　alert(event.data);

　　　　　　});

IE9+是2011年唯一支持复合事件的浏览器，由于缺少支持，它的用处不大

变动事件

DOM2级的变动事件能在DOM中某一部分发生变化时给出提示。变动事件是为XML或HTML DOM设计的，并不特定与某种语言。DOM2级定义如下变动事件

DOMSubtreeModified：DOM结构发生任何变化时触发，这个事件在其他任何事件触发后都会触发

DOMNodeInserted：一个节点作为子节点插入到另一个节点时触发

DOMNodeRemoved：移除节点时触发

DOMNodeInsertedIntoDocument：节点插入文档时触发，发生在DOMNodeInserted之后

DOMNodeRemovedFromDocument：节点从文档移除时触发，发生在DOMNodeRemoved之后

DOMAttrModified：特性被修改时触发

DOMCharacterDataModified：文本节点的值发生变化时触发

删除节点

使用removeChild()或replaceChild()从DOM中删除节点时首先触发DOMNodeRemoved，这个事件的目标（event.target）是被删除的节点，而event.relateNode属性中包含对目标节点的父节点的引用，这个事件触发时，节点尚未从其父节点中删除，parentNode属性仍然指向父节点，这个事件会冒泡，可以在DOM任何层次是处理它

如果被移除的节点包含子节点，那么其所有子节点以及这个被移除的节点会相继触发DOMNodeRemovedFromDocument事件，此事件不冒泡，所以必须指定其中一个子节点的事件处理程序才会被调用，这个事件的目标节点是相应的子节点或者被移除的那个节点

最后一个触发的事件是DOMSubtreeModified，事件目标是被移除节点的父节点

插入节点

使用appendChild()、replaceChild()或insertBefore()向节点插入节点时，首先触发DOMNodeInserted事件，目标节点是被插入的节点，event.relatedNode属性包含对父节点的引用，在这个事件触发时，节点已经被插到新的父节点中，此事件冒泡

然后触发DOMNodeInsertedIntoDocument事件，不冒泡，这个事件的目标是被插入的节点，最后触发DOMSubtreeModified，触发于新插入节点的父节点

EventUtil.addHandler(window,"load",function(event){

　　　　　　var list=document.getElementById("myList");

　　　　　　var item=document.createElement("li");

　　　　　　item.appendChild(document.createTextNode("Item 4"));

　　　　　　EventUtil.addHandler(document,"DOMSubtreeModified",function(event){

　　　　　　　　　　alert(event.type);

　　　　　　　　　　alert(event.target);

　　　　　　　　});

　　　　　　EventUtil.addHandler(document,"DOMNodeInserted",function(event){

　　　　　　　　　　alert(event.type);

　　　　　　　　　　alert(event.target);

　　　　　　　　　　alert(event.relatedNode);

　　　　　　　　});

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　EventUtil.addHandler(item,"DOMNodeInsertedIntoDocument",function(event){

　　　　　　　　　　alert(event.type);

　　　　　　　　　　alert(event.target);

　　　　　　　　});

　　　　　　list.appendChild(item);

　　　　});