JavaScript 变动事件
变动事件，当用户修改了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 变动事件的更多相关文章
- JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点(转)
复合事件 复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列. compositionstart.compositionupdate.compositionend 复合事件有以下三中 ...
- javaScript事件（八）事件类型之变动事件
DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...
- Javascript高级编程学习笔记（66）—— 事件（10）变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- 浅谈JavaScript的事件（事件类型）
Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息.DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发:焦点事件,元素获得或失去焦点触发:鼠标事件,用户通过鼠标在 ...
- 浅谈JavaScript的事件（事件模拟）
事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...
- jacascript DOM变动事件
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非 ...
- javascript 的 事件类型（事件）
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...
- javascript原生事件总结
javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流i ...
- 【JavaScript】事件
一.前言 继续上一章的内容,继续今天的Js学习. 二.内容 事件处理程序 事件就是用户或浏览器自身执行的某种动作.而响应某个事件的函数就叫做事件处理程序 //HTML事 ...
随机推荐
- 选择自助式BI平台的六大标准
自助式BI平台面向的是不具备IT背景的业务分析人员,与传统BI相比更灵活且易于使用,而且一定程度上摆脱对IT部门的大幅度依赖,代表性的自助BI工具厂商如Tableau.思迈特的Smartbi Eag ...
- BI分析系统是什么？有什么用？
伴随着大数据概念的不断发展,存储成本越来越低,数据来源也越来越广泛,我们从原来只关心数据的大小,逐渐转变为如何让数据产生更多的价值.它也一直困扰着许多大小企业,越来越多的企业开始将BI分析系统应用到企 ...
- 【c# 操作符】- nameof用法
最重要的是nameof不会影响性能! nameof有什么用?主要用解决 类成员名做参数替代成员们的字符串做参数,如下: using System; namespace csharp6 { intern ...
- System.Console.WriteLine() 调用原理
1.System.Console.WriteLine(类的实例)默认调用类的Tostring()方法.如果自定义的新类未override ToString()方法.那么调用Object.ToStrin ...
- 基于IEC61499标准的组件
IEC 61499标准通常用于开发分布式控制系统.IEC 61499定义了功能模块(FB, function block)的模型.有三种FB,分别是Basic FB (BFB),Service Int ...
- html页面引用script出现中文乱码问题
在html的head标签中加入代码: <meta http-equiv="Content-Type" content="text/javascript; chars ...
- lsof、tcpdump和wireshark
lsof:https://www.jianshu.com/p/a3aa6b01b2e1 tcpdump:https://linux.cn/article-10191-1.html wireshark: ...
- 反压缩 js ，我的万花筒写轮眼开了，CV 能力大幅提升
前言 因为比较菜,所以经常需要读一些别人的代码学习学习. 有源码的代码当然好,但是很多网站不开源.这些网站的 js 又都是打包压缩过的,学习起来很难受. 所以我做了一个小工具,通过修改抽象语法树,来处 ...
- ajax发送json格式与文件数据、django自带的序列化器（了解）
上期内容回顾 聚合查询和分组查询 # 聚合查询 max min sum avg count # 查询关键字:aggregate from django.db.models import Max, Mi ...
- xor加密的python实现
#md5加密 import hashlib hash_md5 = hashlib.md5() x=input("Please input your text:") print( & ...