• 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,在插入后的插入节点的父节点上触发

  • 相关阅读:
    CoreThink开发(十三)增加页面加载动画
    CoreThink开发(十二)更改默认出错异常页防止暴露敏感数据
    CoreThink开发(十一)首页控制器判断移动设备还是PC并做相应处理
    CoreThink开发(十)把官方首页轮播替换成HTML5-3D轮播
    CoreThink主题开发(九)使用H-ui开发博客主题之用户个人主页
    CoreThink主题开发(八)使用H-ui开发博客主题之用户登录之前及登录之后
    CoreThink主题开发(七)使用H-ui开发博客主题之新闻资讯正文页面
    centos7搭建postfix邮件服务器
    Kibana插件sentinl实现邮件报警
    kibana-Request Timeout after 30000ms故障解决
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10390546.html
Copyright © 2020-2023  润新知