变动事件，当用户修改了DOM结构（添加或删除元素节点）后发生。

任何时候当元素被添加到DOM中或从DOM中移除时，DOM的结构就发生了变化，而这种变化就会触动变动事件。

 1 <html>

 2     <head>

 3         <title>变动事件</title>

 4         <meta charset="UTF-8">

 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6     </head>

 7     <body>

 8         <p>变动事件</p>

 9         <ul id="ul">

10             <li>油条</li>

11             <li>包子</li>

12             <li>米饺</li>

13             <li><a>鱼粉</a></li>

14         </ul>

15         <button id="btnadd">添加</button>

16         <script>

17             var elul = document.getElementById('ul');

18             var btn = document.getElementById('btnadd');

19

20             function add() {

21                 // 创建一个新的元素

22                 var newel = document.createElement('li');

23                 // 创建一个新的文本

24                 var newtext = document.createTextNode('豆花');

25                 // 将文本放到元素内

26                 newel.appendChild(newtext);

27                 // 将新的元素添加到父级

28                 elul.appendChild(newel);

29             }

30

31             btn.addEventListener('click', add, false);

32             elul.addEventListener('DOMNodeInserted', myfunction, false);

33

34             function myfunction() {

35                 alert('刚刚插入了一个节点哦');

36             }

37         </script>

38     </body>

39 </html>

JavaScript 变动事件的更多相关文章

  1. JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点(转)

    复合事件 复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列. compositionstart.compositionupdate.compositionend 复合事件有以下三中 ...

  2. javaScript事件（八）事件类型之变动事件

    DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...

  3. Javascript高级编程学习笔记（66）—— 事件（10）变动事件

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

  4. 浅谈JavaScript的事件（事件类型）

    Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息.DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发:焦点事件,元素获得或失去焦点触发:鼠标事件,用户通过鼠标在 ...

  5. 浅谈JavaScript的事件（事件模拟）

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...

  6. jacascript DOM变动事件

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非 ...

  7. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  8. javascript原生事件总结

    javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流i ...

  9. 【JavaScript】事件

    一.前言         继续上一章的内容,继续今天的Js学习. 二.内容         事件处理程序 事件就是用户或浏览器自身执行的某种动作.而响应某个事件的函数就叫做事件处理程序 //HTML事 ...

随机推荐

  1. Renix软件如何建立OSPF邻居——网络测试仪实操

    OSPF可以通过OSPF向导的方式方便的创建OSPF邻居, 也可以通过纯手工的方式创建OSPF邻居, 本文介绍的是纯手工的方式创建. 在工作中, 推荐使用OSPF向导的方式来创建, 会比较简单和高效. ...

  2. Renix软件如何发送CRC错误的报文——网络测试仪实操

    我们在日常使用Renix软件时,有时候需要发送CRC错误的报文,那么如何操作呢?接下来为你详细介绍一下操作步骤. 1.打开Renix软件,连接机框并预约测试端口: 2.添加流模板 3.给P1设置CRC ...

  3. BI数据可视化工具怎么选？用这款就够了！

    任何一项产品的选择都需要谨慎而全面,BI数据可视化工具的选择就更不用说了.作为企业的IT部门,如果没有良好的BI工具支持,IT部门将会十分容易陷入困境.那么面对多元化的BI工具市场,IT部门该如何选择 ...

  4. Deep Upsupervised Cardinality Estimation 解读（2019 VLDB）

    Deep Upsupervised Cardinality Estimation 本篇博客是对Deep Upsupervised Cardinality Estimation的解读,原文连接为:htt ...

  5. HDFS的上传下载流程

    hdfs上传流程 首先客户端向nn请求上传文件.nn经过检查回应客户端是否可以上传.客户端得到同意后向nn请求上传第一块文件的dn.nn返回给客户端dn的地址.客户端与其中一个dn1建立连接然后dn1 ...

  6. 【C# 线程】线程局部存储（TLS）理论部分 ThreadStatic|LocalDataStoreSlot|ThreadLocal<T>

    线程本地存储(TLS:Thread Local Storage) 线程本地存储(Thread Local Storage),字面意思就是专属某个线程的存储空间.变量大体上分为全局变量和局部变量,一个进 ...

  7. 运维人员常用的Linux命令总结

    转至:https://www.cnblogs.com/CHLL55/p/13698946.html 目录结构 目录 说明 /bin 存放可执行文件 /boot 核心与启动相关文件 /dev 设备有关的 ...

  8. ORACLE SQL*PLUS 命令大全

    转至:https://www.cnblogs.com/kerrycode/archive/2011/06/09/2076248.html 其实网上已经有SQL*PLUS命令大全这方面的资料了,不过大都 ...

  9. WPS:公式在中间，编号靠右

    1.新建表格1*3 2.在中间单元格内输入公式,在右边单元格中输入编号 3.在"开始"菜单栏找到"居中"和"靠右"两个按钮,给中间单元格设置 ...

  10. Scrapy：用cmdline运行爬虫后导致主程序也结束——CrawlerProcesser

    学习自: Scrapy官方文档--CrawlerRunner相关 解决django或者其他线程中调用scrapy报ReactorNotRestartable的错误 - liuxianglong - 博 ...