元素增删事件DOMNodeInserted和DOMNodeRemoved
监听元素变化的三种方法：
- 对于表单类型的控件，使用onchange事件最好。
- 使用DOMNodeInserted和DOMNodeRemoved事件
- 使用定时器定时检测（下策）
有时需要给一个class类型的对象绑定某个事件，对于以后新插入的class类型的元素也要绑定这样的事件。jQuery中很好的实现了这一功能。实际上，只需要DOMNodeInserted和DOMNodeRemoved两个事件就可以监听元素增删，从而可以在增删元素之前，为元素绑定事件。
DOMNodeInserted和DOMNodeRemoved两个事件所对应的方法是浏览器自动执行的，执行时机为真正增删元素之前。
其它的DOM mutation事件：
- DOMAttrModified
- DOMAttributeNameChanged
- DOMCharacterDataModified
- DOMElementNameChanged
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
详情参考MDN
通过以下demo，操作并查看日志可以更好的理解这两个事件。
demo解释：有三个按钮，第一个按钮通过更改innerHTML来添加元素，第二个按钮通过创建元素并插入的方式来添加元素，第三个按钮用于删掉最后一个元素触发DOMNodeRemoved事件。
如果通过innerHTML添加元素，会首先触发很多次删除元素的操作，这样会有较大的创建、销毁对象开销，因此对于少量更改，尽量少用innerHTML而是用创建元素的方式。对于大量更改，使用innerHTML更合理。
<html>
<body>
<div id="main">
<button onclick="addOne()">add one by html</button>
<button onclick="add()">add one by element</button>
<button onclick="removeOne()">remove one by element</button>
</main>
</body>
<script>
var main = document.querySelector("#main")
function addOne() {
console.log("add node by html")
main.innerHTML += "<p>haha</p>";
console.log("added node")
}
function add() {
console.log("adding node by element")
var ele = document.createElement('p')
ele.innerHTML = "haha"
main.appendChild(ele)
console.log("added node")
}
function removeOne() {
var sons = main.children
var removing = sons[sons.length - 1]
console.log("removing " + removing.tagName)
if (removing.tagName.toLowerCase() == 'button') {
alert("别再remove了！")
return
}
main.removeChild(removing)
console.log("child removed")
}
document.body.addEventListener("DOMNodeInserted", function () {
console.log('DOMNode inserted')
console.log(arguments)
})
document.body.addEventListener("DOMNodeRemoved", function () {
console.log("DOMNode removed")
console.log(arguments)
})
</script>
</html>
元素增删事件DOMNodeInserted和DOMNodeRemoved的更多相关文章
- JavaScript事件 DOMNodeInserted DOMNodeRemoved
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 13.1 事件流 ...
- jQuery中对未来的元素绑定事件
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- jQuery中对未来的元素绑定事件用bind、live or on
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- 给DOM生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- jQuery对 动态添加 的元素 绑定事件（on()的用法）
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- 通过原生JS实现为元素添加事件
自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...
- jquery为新增元素添加事件
<script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...
随机推荐
- charles突然不能抓取PC请求解决办法
我在使用charles的时候,突然一天不能抓取PC请求了,原来是我本地开启了手动代理设置,且手动代理的端口号和charles的端口号不一致导致.
- Android应用打开外部文件
我们有时候遇到要打开一个文件,我们可以选择用其他应用打开,这时弹出来的应用列表,那么我们如何让自己开发的应用也能出现在里面呢? 第一步:设置启动Activity的intent-filter,给data ...
- linux基础学习（二）ls命令以及文件访问权限例（-rw-r-r--）
ls命令 |命令选项|作用| |:-----:|:----:| |ll| 显示文件得详细信息| |ls -a |显示文件和隐藏文件| |ls -t|以文件和目录的更改时间排序| |ls -m|用&qu ...
- C# 集合的交集 差集 并集 去重
C# 集合的交集 差集 并集 去重 两个对象list,直接比较是不行的,因为他们存的地址不一样 需要重写GetHashCode()与Equals(object obj)方法告诉电脑 class Stu ...
- CentOS7破解root密码
第一步: reboot重启系统,进入修改密码步骤,出现此界面后,按e进行编辑 2.找到linux16这一段中的 ro crashkernel=xxx, 将 ro 改成rw init=/sysroot ...
- day82_10_31celery的使用
1.缓存 当一些数据需要固定地且频繁访问数据库时,需要使用到接口缓存. 以轮播图为例,每个用户都会访问首页,首页的轮播图长时间不会改变,所以可以使用cache,将固定数据保存到缓存中(redis),第 ...
- day50_9_11 bootstarp使用
一.下载官网. https://www.bootcss.com/ 使用3版本 https://www.bootcdn.cn/ CDN搜索网址. 配置代码: <link rel="sty ...
- 深度工作（Charlotte）
作者:Charlotte文章转自:https://zhuanlan.zhihu.com/p/56719363 为什么要深度工作? 作为一名程序员/媛,工作时长动则十几小时,然而有的人效率奇高,有的人上 ...
- [C1W4] Neural Networks and Deep Learning - Deep Neural Networks
第四周:深层神经网络(Deep Neural Networks) 深层神经网络(Deep L-layer neural network) 目前为止我们学习了只有一个单独隐藏层的神经网络的正向传播和反向 ...
- 树莓派开机主动发送自己的局域网ip/外网ip到你的微信
开机时,树莓派主动发送自己的内网ip以及公网ip到你的微信上,这样就能方便地使用ssh或VNC. 操作步骤 下载目录下的 boot_getIP_send_Wechat.py 到你的 Raspberry ...