变动事件，当用户修改了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. 小白都能看懂的tcp三次握手

    众所周知,TCP在建立连接时需要经过三次握手.许多初学者经常对这个过程感到混乱:SYN是干什么的,怎么一会儿是1一会儿是0?怎么既有大写的ACK又有小写的ack?为什么ACK在第二次握手才开始出现?初 ...

  2. linux中ctrl+c、ctrl+z、ctrl+d区别

    转至:https://www.cnblogs.com/jintaoblogs/p/11343623.html 一.ctrl-c 发送 SIGINT 信号(程序终止(interrupt)信号)给前台进程 ...

  3. 《Symfony 5全面开发》教程03、使用Controller创建第一个页面

    我们使用Phpstorm打开我们的项目目录,展开项目目录文件夹. Symfony项目其实也是composer项目,如果你新拿到一个Symfony项目, 你可以在控制台中使用composer insta ...

  4. linux 提权防护

    linux 用户提权 利用系统漏洞或者程序等方面的缺陷使一个低权限用户,获得他们原本不具有的权限或者得到root权限 下面介绍几种可能得到root访问权限的方式 1, 内核开发 防护:及时更新补丁 臭 ...

  5. 矩池云升级JupyterLab版本教程

    先使用 Xshell 连接矩池云 GPU服务器,可以查看教程. 要在base环境下执行,用下面命令 conda deactivate ps -aux | grep jupyter 我这个进程是616 ...

  6. Yaconf-配置管理扩展

    1.下载yaconf安装包git clone https://github.com/laruence/yaconf.git2.目录切换至yaconf,编译生成so 文件(找到你的phpize位置) / ...

  7. iCloud开发: key-value Storage,CloudKit,iCloud Documents

    目录 iCloud开发 iCloud三种类型的存储方式 项目配置 1.iCloud 官网配置 2.本地Xcode配置 注意事项 一.key-value storage 1.获取默认store 2.写入 ...

  8. Ubuntu 16.04.3 Server 版安装过程图文详解

    Ubuntu 16.04.3 Server 版安装过程图文详解 首先,我们会进入系统安装的第一个界面,开始系统的安装操作.每一步的操作,左下角都会提示操作方式! 1.选择系统语言-English2.选 ...

  9. Django基础三之路由、视图、模板

    Django基础三之路由.视图.模板 目录 Django基础三之路由.视图.模板 1. Django 请求和返回周期 1.1 路由层之路由匹配 1.2 有名分组 1.3 无名分组 2. 反射解析 3. ...

  10. LGP2461题解

    引用化学老师的一句话:什么矩阵,没有矩阵! 这种板子题怎么能用矩阵呢. \(O(k^2\log n)\) 能搞定何必需要 \(O(k^3\log n)\) 呢. 首先设 \(F_n(x)=x^n \b ...