JS监控DOM的事件（内部插入、移除、修改属性等）！爽！

这可不是简单的 onclick、onchange，你对 DOM 进行内部插入、移除、属性修改等均会触发相应事件。

DOM 事件列表：

  • DOMAttrModified
  • DOMAttributeNameChanged
  • DOMCharacterDataModified
  • DOMElementNameChanged
  • DOMNodeInserted
  • DOMNodeInsertedIntoDocument
  • DOMNodeRemoved
  • DOMNodeRemovedFromDocument
  • DOMSubtreeModified


如何用？

像普通绑定事件一样绑定到 DOM 里就可以。

兼容性？

我只测了 Firefox 和 Chrome，其他的没有测，我的项目只需要兼容现代浏览器就可以了。

参考MDN：https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent

参考W3C：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent

时间： 2024-08-01 22:29:46

JS监控DOM的事件（内部插入、移除、修改属性等）！爽！的相关文章

js 监控浏览器关闭事件

代码如下: <!DOCTYPE html> <html> <head> <title>监控浏览器关闭事件</title> </head> <style type="text/css"> </style> <body> <div id="create_order"> </div> </body> </html> &

js监控键盘大小写事件

JavaScript键盘事件侦听 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事 件的执行顺序如下:onkeydown -> onkeypress ->onkeyup. 在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应.实际使用过程中的差别如下: onkeypress事件不能对系统功能键(例如:后退.删除等,其中对中文输入法不能有效响应)进行正常的响应, onkeydown和onkeyu

js监控视频播放的事件并打印log

html代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>Multi Source</title> 6 </head> 7 <body> 8 <video src="ht

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

【JS】DOM事件模型

DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API).一般的,支持Javascript的所有浏览器都支持DOM. 在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>.<title>.<body>是<

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

原生js跨浏览事件绑定(移除)/javascript事件绑定（移除）

网上找了半天没看到,都是基于ie attachEvent(有诸多的问题存在)来写的,所以手动写了个js模拟绑定事件希望能帮到需要的童鞋 addEvent = function(obj,type,fn){  if(obj.addEventListener) {//W3C   obj.addEventListener(type,fn,false);  }else if (obj.attachEvent) {//ie(期待它的灭亡)   if(!obj.events) obj.events = {};

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

DOM内部插入append()与appendTo()

DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部.针对这样的处理,jQuery就定义2个操作的方法