变动事件，当用户修改了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. [题解]第十一届北航程序设计竞赛预赛——D.最大公约数

    题目描述 给一个长度为n(1<=n<=100000)的正整数列,分成尽量多的非空段,使得每一段的最大公约数相等.一个数的最大公约数是它本身. 解题思路 要求每一段子列的gcd相等,不妨设为 ...

  2. RFC2889错误帧过滤测试----网络测试仪实操

    一.简介 RFC 2889为LAN交换设备的基准测试提供了方法学,它将RFC 2544中为网络互联设备基准测试所定义的方法学扩展到了交换设备,提供了交换机转发性能(Forwarding Perform ...

  3. IPv6 OSPFv3路由协议测试——信而泰网络测试仪实操

    关键词 IPv6; OSPFv3; OSPFv2. 前言:在网络部署中,动态路由协议是重要的组成部分.良好的路由协议,是保证网络可靠.稳定运行的基础.为了适应IPv6协议栈的变化,OSPFv3协议在保 ...

  4. go面试集锦1

    目录 1.go优缺点 2.go中常量是怎么实现 3.go的值传递和引用 4.go struct能不能比较 5.go协程线程安全吗 6.go中关键字 7.make和new区别 8.defer 9.生产者 ...

  5. windows 应用商店常用软件

    QuickLook 这个应用可以让你,用空格键查看几乎任何文件的信息. 例如快速查看图片,播放视频,阅读 PDF 等等,支持的格式多到吓人.  Python 没错,就是那个非常火的编程语言,Pytho ...

  6. Python：matplotlib.cm 色表

    官网:Choosing Colormaps in Matplotlib - Matplotlib 3.5.0 documentation Colormap与matplotlib.cm 我们以等高区域函 ...

  7. JZ-010-矩形覆盖

    矩形覆盖 题目描述 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题目链接: 矩形覆盖 代码 /** * 标题:矩形覆盖 ...

  8. LOTO示波器汽修专用款选型指南

    LOTO示波器汽修专用款选型指南 LOTO各种型号的示波器其实都可以用作汽车传感器信号波形的检测.汽修应用中,工程师对示波器的性能要求对于LOTO产品来说不算高. 在我们销售和技术支持的积累过程中,我 ...

  9. mplus数据分析：增长模型潜增长模型与增长混合模型再解释

    混合模型,增长混合模型这些问题咨询的同学还是比较多的,今天再次尝试写写它们的区别,希望对大家进一步理解两种做轨迹的方法有帮助. 首先,无论是LCGA还是GMM,它们都是潜增长模型的框框里面的东西: L ...

  10. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...