变动事件，当用户修改了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. 广州市首批！Smartbi入库信创产品资源池，引领国产BI软件崛起

    为贯彻落实软件高质量发展战略,加快建设有影响力的信息技术创新(简称"信创")资源池,广州市工业和信息化局经征集申报.专家评审.现场考察等多个环节,发布了"广州市信息技术应 ...

  2. 给bootstrap-table填坑

    由于设计变更,需要把数据由分页展示改为全部展示(才3500条数据),结果chrome浏览器页面卡顿,火狐浏览器直接卡死! console.time分析之后,竟然是bootstrap-table插件的坑 ...

  3. 2020ICPC南京 M.Monster Hunter

    题目大意 一颗根为 \(1\) 的有 \((2≤≤2000)\) 个节点的树,每个节点有一个权值 \(ℎ_{} (1≤ℎ_{}≤10^9)\) ,能删除某个点的前提是其父亲节点已经被删除,并且删除一个 ...

  4. Python：用正则表达式，提取字符串中的所有中文

    import re def clean(line): pattern = re.compile(u'[^\u4e00-\u9fa5]') #中文的范围为\u4e00-\u9fa5 line = re. ...

  5. ROS中msg和srv文件的区别

    1.msg和srv究竟有什么区别?? msg只是单向的发送和接受. srv包含两个部分:请求和响应. 2.msg和srv简介 msg:msg文件是描述ROS消息字段的简单文本文件.它们用于为不同语言( ...

  6. CPU长指令(VLIW)失败的主要原因是什么，VLIW真的无药可救吗？

    software和hardware之间总是存在tradeoff:要么是hardware结构复杂,software灵活.要么是hardware结构保持简洁清晰,software干一些脏活累活.VLIW就 ...

  7. Linux CentOS7.X-目录操作命令

    一.安装vim 由于安装Centos7MINI版本里面没有vim命令,只有vi命令,所以安装vim命令,默认系统只带了vim-minimal.x86_64包,需要安装其他的3个包才能用vim命令 1. ...

  8. Spring注解简析

    JAVA 元注解 @Documented @Inherited @Retention @Target @Repeatable @Native 在java.lang.annotation包下,除了@Na ...

  9. laravel resource风格

    resource 风格 概念 一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存 ...

  10. SpringCloud微服务之Ribbon负载均衡（一）

    什么是微服务?什么是SpringCloud? 微服务是一种架构的模式,它提倡将一个应用程序划分成很多个微小的服务,服务与服务之间相互协调.相互配合.每个服务运行都是一个独立的进程,服务与服务之间采用轻 ...