变动事件，当用户修改了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. Win10系统下关闭管理员运行确认弹窗

    Windows10及以上系统对于安全的考虑,对于程序运行时的权限做了控制.    点击后,会弹出确认的弹窗. 像我做测试,或者使用cmd经常需要administrator 权限,一直弹弹弹就很烦. 要 ...

  2. 【C# TAP 异步编程】二 、await运算符已经可等待类型Awaitable

    await的作用: 1.await是一个标记,告诉编译器生成一个等待器来等待可等待类型实例的运行结果. 2.一个await对应一个等待器 ,任务的等待器类型是TaskAwaiter/TaskAwait ...

  3. 一个C#程序的执行过程

    可能很多人都知道我们把程序打包成dll就丢出去了,但是里面的具体的执行过程是怎么样的呢. 程序集是由元数据和IL组成的.IL是和CPU无关的语言,是微软的几个专家请教了外面的编译器的作则,开发出来的. ...

  4. springMVC 调查问卷系统 record

    Maven下的依赖包有两个 spring-web和springWebMVC springwebMVC包含spring-web依赖, 但是spring-web的等级大于Spring-webmvc 没有 ...

  5. Educational Codeforces Round 110 A-D 题解

      A. Fair Playoff 题目大意:有4个人进行比赛,第一个和第二个比,第三个和第四个比,之后各自的胜者再比,最开始每个人持有一个数字,每场比赛持有数字较大的选手会胜出,问最开始持有数字最大 ...

  6. pip:各项指令

    学习自:(7条消息) pip 常用命令及控制台怎么查看python 及pip 和已安装包版本号_peiwang245的博客-CSDN博客_查看pip版本 1.版本及升级 版本:pip -V 升级:pi ...

  7. Python:HTTP请求头headers信息的查询

    GET和POST请求后会返回一个response对象,可通过key.values等访问字典中元素的方式来访问该response对象headers中的各种属性 r=requests.get(url,he ...

  8. c# 表格控件SourceGrid使用总结

    网上SourceGrid相关的资料很少,使用过程中做了下记录,以便日后查用 1:初始化 this.grid = new SourceGrid.Grid(); this.grid.Size = new ...

  9. python如何data格式和时间戳的转换

    Python 获取几天前的时间 计算几天前并转换为指定格式. import time import datetime # 先获得时间数组格式的日期 threeDayAgo = (datetime.da ...

  10. Visual Studio双击打开项目而不是项目属性文件

    从VS2019版本就默认勾选了这个,每次打开都是到属性文件,这个根本用不到,点击小三角又比较麻烦,不知道为啥微软给了这个默认功能 VS2022 Preview也是,默认勾选 勾选如下即可: