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事 ...
随机推荐
- 小白学python第2问： 为什么只有int，没有long？
为什么只有int,没有long? 在python官网开发者指引里面能找到 PEP 237 -- Unifying Long Integers and Integers,这里说明了为什么要统一 int ...
- Symfony Bundle开发视频教程分享
之前分享了自己录制的<Symfony 5全面开发>视频教程,收到的反馈不错,说学到了东西,讲的很深入等等. 上一次分享的链接:自己录制的Symfony5视频教程,免费分享给大家学习. 小晒 ...
- 2020ICPC上海站 C. Sum of Log
题目大意: 给定T组X,Y,对于每组X,Y,求上面式子 的值,其中 当x为真时等于1,其他情况等于0. 其中. 思路: 对X,Y一起进行数位DP,我们把每一位枚举数字的上限以及数字之前是否有前导 ...
- 哈工大 计算机网络 实验三 IPv4 分组收发实验&IPv4 分组转发实验
计算机网络实验代码与文件可见github:计算机网络实验整理 实验名称 IPv4 分组收发实验&IPv4 分组转发实验 实验目的: (注:实验报告模板中的各项内容仅供参考,可依照实际实验情况进 ...
- SpringBoot入门一：基础知识（环境搭建、注解说明、创建对象方法、注入方式、集成jsp/Thymeleaf、logback日志、全局热部署、文件上传/下载、拦截器、自动配置原理等）
SpringBoot设计目的是用来简化Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,SpringBoot致力于在蓬勃发 ...
- DNS服务/etc/rndc.key was found解决办法
问题: [root@localhost ~]# rndc reload rndc: neither /etc/rndc.conf nor /etc/rndc.key was found 解决办法: R ...
- PHP pdf转png linux版本
linux下 安装 ImageMagick 及其 php imagick扩展 PHP版本 7.1.29 : ImageMagick版本 ImageMagick-7.0.8-68: PHP扩展imagi ...
- docker学习笔记（3）- 镜像
简介 在docker学习笔记(1)- 架构概述一节中可以看到镜像是docker三大组件之一,可以将Docker镜像类比为虚拟机的模版. 镜像由多个层组成,每层叠加之后从外部看就像一个独立的对象,镜像的 ...
- java高并发之ConcurrentSkipListMap的那些事
注意:本文内容基于JDK11,不同版本会有差异 ConcurrentSkipListMap的结构 ConcurrentSkipListMap是以链表(自然排序)的形式进行数据存储的.即在类中通过定义N ...
- Hibernate学习笔记(一)-->数据库单表操作
Hibernate框架是一个全ORM映射框架,是一个非常流行的数据库操作框架之一,现在比较流行的还有MyBatis半ORM映射框架 在MyEclipse IDE开发工具中,可以很轻松的搭建Hibern ...