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

最新推荐文章于 2024-03-10 10:44:18 发布

weixin_33810006

最新推荐文章于 2024-03-10 10:44:18 发布

阅读量1.6k

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/988279/blog/491173

版权

2019独角兽企业重金招聘Python工程师标准>>>

这可不是简单的 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

转载于:https://my.oschina.net/u/988279/blog/491173

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33810006

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JS笔记（二） DOM部分

Kivitor的博客

03-23

511

DOM DOM定义了表示和修改文档所需的方法。dom对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合（但不能操作CSS样式表，但是可以通过操作html改变行间样式来间接改变）。也有人称DOM是对HTML以及XML的标准编程接口 DOM基本操作对节点的增删改查查查看元素节点把对象放在一个类数组里不能使用push方法 document代表整个文档 document.getElementById()//元素id在ie8以下的浏览器，不区分id大小写，而且也返回匹配cl

webapi-03

qq_62413209的博客

02-15

415

webapi-03 1.删除节点 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // // 1.获取元素 // var ul = document.querySelector('ul'); // ul.rem...

参与评论您还未登录，请先登录后发表或查看评论

JQuery中DOM实现事件移除的方法

10-24

主要介绍了JQuery中DOM实现事件移除的方法,涉及jQuery中unbind方法移除事件绑定的相关技巧,需要的朋友可以参考下

jQuery DOM 事件中的删除事件

weixin_57771882的博客

07-18

1002

今天的主题为jQuery DOM 事件中的删除事件，有以下几种方法比较常用 html代码 css代码效果记得还要插入“jquery-1.12.4.min.js” 1. empty() 这个方法是清空，就是删除匹配的元素集合中所有的子节点 $("#div1").empty() 删除.div1的所有子节点我们用浏览器查看一下代码只剩下外层包裹h1跟p标签的div 2. remove() 从 DOM 中删除所有匹配的元素，包括绑...

监听dom位置是否移出浏览器

qq_30597401的博客

11-23

361

// 监听滚动监听上部播放器移出 window.addEventListener('scroll', scrollHandle, true); function scrollHandle(){ var a = $("#daylyMusic")[0].offsetTop - $(document).scrollTop() - $(window).height(); // 获取div距离顶部的距离 — 滚动的距离 — 浏览器的高度 .

JavaScript：DOM事件

盒马的博客

12-24

1780

讲解JavaScript中的事件，包括事件监听，事件冒泡，事件委托等技巧

js 动态新增、删除行添加事件

bolink5的专栏

07-18

2129

<br /> 也没啥好说的，完全是因为项目中需要<br /> 直接上html代码，读者可以根据自己的需求再进行修改。<br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>添加表格信息</title>

DOM和XMLHttpRequest对象的属性和方法整理

09-05

- `onreadystatechange`：一个事件处理器，每当XMLHttpRequest对象的`readyState`属性改变时，都会触发此事件处理器。 - `readyState`：表示请求的状态，有五个可取值：0=未初始化，1=正在加载，2=已加载，3=交互...

如何监听页面DOM变动并高效响应

01-27

总的来说，监控页面DOM变动并高效响应涉及JavaScript事件系统、DOM变动事件和MutationObserver。合理地使用这些工具可以让我们在Chrome插件开发中优雅地处理动态页面的交互和更新，同时避免性能问题。

js 某个页面监听事件渲染完毕的时间.docx

05-08

这使得开发者能够更早地对页面进行操作，比如访问和修改DOM元素。以下是一个使用`DOMContentLoaded`的例子： ```javascript document.addEventListener('DOMContentLoaded', function() { console.log('DOM已加载...

2023必知必问的Vue3面试题总结！！！.docx

07-23

调用后，Vue 实例指示的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也被销毁。 5. **其他生命周期钩子**： - `activated`：keep-alive 组件激活时调用。 - `deactivated`：keep-alive 组件停用时...

js 中 document.createEvent的用法

10-28

用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event 对象参考。

HTML5游戏_基于DOM平台跳跃小游戏开发_9.按键监听

03-04

源码

js如何监听元素事件是否被移除_Javascript / DOM：如何删除DOM对象的所有事件？

weixin_42339759的博客

02-26

1385

创建一个包装器，用于addEventListener存储对返回函数的引用并创建一些奇怪的removeAllEvents函数：var_eventHandlers={};//somewhereglobalfunctionaddListener(node,event,handler,capture){if(!(nodein_eventHandlers)){//_eventH...

JavaScript DOM事件流事件捕获事件冒泡

lixiaosenlin的专栏

09-08

7717

事件在讲事件流之前，我们先来了解一下事件。 JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器（或事件处理程序）来预订事件，以便事件发生时执行相应的代码。说白了，就是当我们对页面上的某些元素进行某些操作（比如鼠标单击）时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件，产生的行为就是弹出了一个对话框。事件最早是在IE3和Netscape Navigator2 中出现的，当

dom中的事件处理

weixin_54327001的博客

05-28

906

button onclick="console.log('按钮1发生了点击~');">按钮1

js如何监听元素事件是否被移除_javascript – 如果一个DOM元素被删除,它的监听器也从内存中删除？...

weixin_39863616的博客

12-19

1690

现代浏览器纯JavaScript如果被删除的DOM元素是无引用的(没有指向它的引用)，那么yes – 该元素本身被垃圾收集器以及与其相关联的任何事件处理器/监听器拾取。var a = document.createElement('div');var b = document.createElement('p');// Add event listeners to b etc...a.append...

DOM（四）：注册和删除事件、DOM事件流、事件对象、事件委托