Javascript高级编程学习笔记(66)—— 事件(10)变动事件

时间:2023-03-09 20:21:24
Javascript高级编程学习笔记(66)—— 事件(10)变动事件

变动事件

DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示

变动事件是为XML或HTML DOM 设计的,并不特定于某种语言

DOM2级定义了如下变动事件:

  • DOMSubtreeModified:在DOM结构发生变化时触发,即会在下面所有事件触发后触发
  • DOMNodeInserted:当一个节点作为子节点插入另一个节点中时触发
  • DOMNodeRemoved:节点从父节点中移除时触发
  • DOMNodeInsertedIntoDocument:一个节点被直接插入文档或通过子树间接插入文档后触发,在DOMNodeInserted 事件之后触发
  • DOMNodeRemovedFromDocument:一个节点直接从文档移除,或通过子树间接从文档移除触发,在DOMNodeRemoved 事件之后触发
  • DOMAttrModified:特性被修改之后触发
  • DomCharacterDataModified:在文本节点的值发生变化时触发

可以使用以下代码判断浏览器对变动事件的支持性:

var isSupported = document.implementation.hasFeature("MutationEvents","2.0");

由于DOM3作废了其中的部分变动事件,所以下面只介绍仍被支持的事件

删除节点

当我们使用 removeChild() 或 replace Child()从DOM中删除节点时

首先会触发 DOMNodeRemoved 事件

在这个事件的 event 事件对象中

event.target 是被删除的节点

event.relatedNode 则是对目标节点的父节点的引用

在该事件触发时,目标节点还尚未从其父节点移除,因此这时其 paerentNode 仍指向其父节点

该事件会冒泡因此可以在DOM的任何层次上处理它

此后在目标节点即其子节点(如果有的话)会相继触发 DOMNodeRemovedFromDocument 事件,该事件不会冒泡,所以只能在事件流的处于目标阶段进行处理

此外该事件的 event 对象不包含其它信息如:不包括relatedNode

然后触发 DOMSubtreeModified 事件,事件的目标元素是被移除元素的父节点

此时的事件对象也不会提供额外的信息,如:relatedNode

插入节点

在使用 append Child()replaceChild()或者insertBefore()向DOM中插入节点时

首先会触发 DOMNodeInserted 事件

该事件的目标是被插入的节点

同样地,event.relatedNode 指向目标节点的父节点

当该事件触发时 目标元素已经插入到了新的父节点中 ,该事件是冒泡的,同样可以在DOM的各个层次上对其进行处理

此后会触发 DOMNodeInsertedIntoDocument 事件,该事件不冒泡

所以需要在插入之前为目标元素添加该事件的事件处理程序

最后一个触发的事件是 DOMSubtreeModified,在插入后的插入节点的父节点上触发