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事 ...
随机推荐
- Deep Upsupervised Cardinality Estimation 解读（2019 VLDB）
Deep Upsupervised Cardinality Estimation 本篇博客是对Deep Upsupervised Cardinality Estimation的解读,原文连接为:htt ...
- linux(Centos7)安装mysql
查看系统环境 [root@localhost html]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) CentOS 7 ...
- 正则表达式（三）——Java中的相关函数
1.前言 之前在学习Python时,我已经说过正则表达式的相关语法,这里不再赘述了,有需要可以参考: 2020.10.7 正则表达式(一) - ShineLe - 博客园 现在开始学习Java中的正则 ...
- Python：pandas（二）——pandas函数
Python:pandas(一) 这一章翻译总结自:pandas官方文档--General functions 空值:pd.NaT.np.nan //判断是否为空 if a is np.nan: .. ...
- Python：输入关键字进行百度搜索并爬取搜索结果
学习自:手把手教你用Python爬取百度搜索结果并保存 - 云+社区 - 腾讯云 如何利用python模拟百度搜索,Python交流,技术交流区,鱼C论坛 指定关键字,对其进行百度搜索,保存搜索结果, ...
- LeetCode-043-字符串相乘
字符串相乘 题目描述:给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例说明请见LeetCode官网. 来源:力扣( ...
- LeetCode-011-盛最多水的容器
盛最多水的容器 题目描述:给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, ...
- LeetCode-025-K 个一组翻转链表
K 个一组翻转链表 题目描述:给你一个链表,每 k 个节点一组进行翻转,请你返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度. 如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保 ...
- LeetCode-086-分隔链表
分隔链表 题目描述:给你一个链表的头节点 head 和一个特定值 x ,请你对链表进行分隔,使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前. 你应当 保留 两个分区中每个节点的初始相对 ...
- 『现学现忘』Docker基础 — 13、通过脚本安装Docker
Docker官方提供方便用户操作的安装脚本,用起来是非常方便.但是要注意的是,使用脚本安装Docker,是安装最新版本的Docker. 注意:不建议在生产环境中使用安装脚本.因为在生产环境中一定不要最 ...