元素增删事件DOMNodeInserted和DOMNodeRemoved

最新推荐文章于 2022-07-20 16:55:18 发布
最新推荐文章于 2022-07-20 16:55:18 发布
阅读量3.1k 收藏 4
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/weiyinfu/p/11584047.html
版权

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

  • 对于表单类型的控件，使用onchange事件最好。
  • 使用DOMNodeInserted和DOMNodeRemoved事件
  • 使用定时器定时检测（下策）

有时需要给一个class类型的对象绑定某个事件，对于以后新插入的class类型的元素也要绑定这样的事件。jQuery中很好的实现了这一功能。实际上，只需要DOMNodeInserted和DOMNodeRemoved两个事件就可以监听元素增删，从而可以在增删元素之前，为元素绑定事件。

DOMNodeInserted和DOMNodeRemoved两个事件所对应的方法是浏览器自动执行的，执行时机为真正增删元素之前。

其它的DOM mutation事件：

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

详情参考MDN

通过以下demo，操作并查看日志可以更好的理解这两个事件。
demo解释：有三个按钮，第一个按钮

最低0.47元/天 解锁文章
dejing6575
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件用法浅析
10-21
- 变动事件：如`DOMAttrModified`、`DOMNodeInserted`、`DOMNodeRemoved`。 - HTML5事件：如`dragstart`、`dragend`、`drop`。 - 设备事件：如`deviceorientation`、`devicemotion`。 - 触摸与手势事件：如`...
javascript事件列表解说
03-20
在实际应用中，我们还可以利用事件委托，通过监听父级元素来处理子元素的事件，以减少内存占用和提高性能。此外，还有一些高级技术，如事件阻止（event.preventDefault()）和事件停止传播（event.stopPropagation()...
JavaScript事件 DOMNodeInserted DOMNodeRemoved
Allen专栏
06-16 4852
第13章事件        JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定交互的瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。 13.1 事件流        事件流描述的是从页面中接收事件的顺序。 1.3.1.1 事件冒泡        IE的事件流叫做事件冒泡（event bubbling），即事件开
DOMNodeInserted 和 DOMNodeRemoved 事件
11-22 5195
DOMNodeInserted 和 DOMNodeRemoved 事件 在DOM中可以通过DOMNodeInserted和DOMNodeRemoved这两个事件来监视DOM元素的插入和移除。但由于各浏览器中DOM树的处理方式不同，导致了这两个事件在各个浏览器上都有各自的特点。只要知道了这些特定，使用时做特殊处理就能暂时解决问题。 以下测试是在文档对象上绑定这两个事件（它们是会冒泡的），并通执行一系...
DOMNodeInserted，DOMNodeRemoved 和监听内容变化插件
weixin_56071908的博客
05-09 189
元素的增加 删除 及事件监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
js DOMNodeInserted，DOMNodeRemoved 和监听内容变化插件
热门推荐
ljinkai_ljk的专栏
12-07 1万+
1 DOMNodeInserted，DOMNodeRemoved 今天想对某个div的变化做监听，发现了这两个方法，还是很好使的。 具体从字面就能看出其意义，但是有个地方需要注意，这个方法的调用时机在jQuery的对dom操作之前执行。 ulObj.bind('DOMNodeInserted', function(e) { var obj = jQuery(e.t
HTML5 CSS3 JavaScriptWeb前端开发自测试卷5.pdf
11-28
HTML5是超文本标记语言的最新版本，它增强了网页的交互性... - DOM事件：如DOMNodeInserted、DOMNodeRemoved（DOM节点插入或移除）。 这些知识点涵盖了HTML5、CSS3和JavaScript的基础部分，对于Web前端开发至关重要。
如何监听页面DOM变动并高效响应
01-27
最后，如果目标元素或其祖先元素绑定了冒泡阶段的事件处理函数，事件将从目标元素开始向上冒泡，直到文档的根节点。了解这些阶段对于正确选择和使用事件至关重要。 在页面加载过程中，有多个相关的事件，如`onload`...
base-dom.zip
最新发布
11-08
8. **DOM修改事件**：当DOM结构发生变化时，会触发相应的事件，如`DOMNodeInserted`、`DOMNodeRemoved`等。不过，这些旧的Mutation Events已经被MutationObserver接口取代，后者提供了一种更高效的方式来监听DOM的...
DOMContentLoaded DOMNodeInserted DOMNodeRemoved 加载 添加 删除 dom
web修理工
05-16 349
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
【原生js】js监听内容变化 dom变动 DOMNodeInserted
qq_36557846的博客
07-20 1334
js监听内容变化 dom变动 DOMNodeInserted
Javascript event 事件之DOMNodeInserted，DOMNodeRemoved
08-08 2544
<br /> <br />w3c的事件，但并不是所有浏览器支持（除了IE之外）<br /> <br />these two events will only bubbles up, so only childs' event will bubbles up. parent's event will not esculate to children<br /> <br /> 
DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument与MutationObserver的不同
Academia_zhen的博客
06-21 6483
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步...
利用DOMNodeInserted监听标签内容变化
weixin_30847865的博客
07-12 519
var exeFlag = 0;//控制执行业务次数标记$('#list1').bind('DOMNodeInserted', function () { if(!/img/.test($("td[aria-describedby$='icon']").html())){ if(exeFlag == 0){ console.log("业务处理");//...
监听dom中插入元素事件
ydZ157的博客
12-04 774
//监听dom变化执行事件 $("#content").bind("DOMNodeInserted",function(e){ //do something... })
jquery中检测某个dom节点下新增元素的方法
qq_58232957的博客
02-21 586
$("#data_html").bind("DOMNodeInserted",function(e){ console.log(e); })
javascript DOMNodeInserted事件
weixin_33896726的博客
03-17 998
2019独角兽企业重金招聘Python工程师标准>>> ...
ajax使用append()后样式无效,jquery.ajax使用字符串拼接后内联css样式失效
06-11
如果使用 jQuery 的 append() 方法添加 HTML 代码后出现样式失效的问题，可能是因为添加的元素是动态生成的，而样式表已经被加载完成，浏览器无法将样式应用到动态生成的元素上。 解决这个问题的方法是，可以使用 jQuery 的 on() 方法来代替 append() 方法，将 HTML 代码添加到指定的 DOM 元素中。这样添加的元素会被浏览器正确解析，样式也会生效。具体的代码如下： ```javascript $('body').on('DOMNodeInserted', '.myClass', function() { $(this).css('color', 'red'); }); ``` 这段代码中，我们使用 on() 方法来监听 .myClass 元素的插入事件，当这个元素被添加到 body 中时，就会触发 DOMNodeInserted 事件，然后我们再将样式应用到这个元素上。 如果需要添加多个样式，可以将样式写成 CSS 类，然后使用 addClass() 方法将这个类添加到元素上。如下代码所示： ```javascript .myClass { color: red; font-size: 16px; } $('body').on('DOMNodeInserted', '.myClass', function() { $(this).addClass('myClass'); }); ``` 这样添加的元素样式就可以生效了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值