监听元素变化的三种方法：

  • 对于表单类型的控件，使用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的更多相关文章

  1. JavaScript事件 DOMNodeInserted DOMNodeRemoved

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 13.1 事件流 ...

  2. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  3. jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  4. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  5. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  6. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  7. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  8. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  9. jquery为新增元素添加事件

    <script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...

随机推荐

  1. js清除定时器注意点

    如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...

  2. 详细设计文档（final）

    1. 引言 1.1编写目的 本部分旨在阐明编写详细设计的目的,面向读者对象. 本文档主要描述各个模块的细节设计,明确软件的结构与实现过程,分析各个模块,描述模块的功能.性能和结构等方面包括模块接口.调 ...

  3. [Linux] 编写Dockerfile文件自动构建镜像

    Dockerfile是一个文本文件,按顺序包含构建给定镜像所需的所有命令Docker通过读取Dockerfile中的指令自动构建图像 . Dockerfile遵循特定的格式和指令集,您可以在Docke ...

  4. 7. Vue - 组件

    一.组件分类 1. 定义 ​ 组件是可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义元素.特点为:代码重用,提高开发效率,让网页结构更清晰. 2. 局部组件 ​ 只能在定义它的el中 ...

  5. 面试必备的13道可以举一反三的Vue面试题

    Vue框架部分我们会涉及一些高频且有一定探讨价值的面试题,我们不会涉及一些非常初级的在官方文档就能查看的纯记忆性质的面试题,比如: *   vue常用的修饰符? *   vue-cli 工程常用的 n ...

  6. day55_9_19模型层的操作

    一.配置settings. 如果是queryset对象 那么可以点query直接查看该queryset的内部sql语句 将以下代码放入settings中.就可以实现当使用orm时查看sql语句: LO ...

  7. [C11] 推荐系统(Recommender Systems)

    推荐系统(Recommender Systems) 问题阐述(Problem Formulation) 将 推荐系统 纳入这门课程来讲有以下两个原因: 第一.仅仅因为它是机器学习中的一个重要的应用.在 ...

  8. ICCV2019《KPConv: Flexible and Deformable Convolution for Point Clouds》

    针对semantic3D数据集: 1.数据集准备: Semantic3D dataset can be found <a href="http://www.semantic3d.net ...

  9. NG-ZORRO 使用相关

    Upload上传 import { Component, Input, Output, EventEmitter, Inject } from '@angular/core'; import { Nz ...

  10. 002Excel冻结窗口（冻结第二行）

    不知道是最近状态不好还是怎么回事Excel冻结前面两行居然弄了很久,而工作上又急需,为此还是记录一下 其实超级简单(不会的话就很难) 如果冻结一行 这个非常简单 那么冻结前面两行呢?我研究了很久,其实 ...