监听 html dom 变化,js怎么监听元素属性变化

梦里梦外; 2022-10-06 10:53 290阅读 0赞

我觉得MutationObserver可以用啊，正常情况下，这个等待DOM操作结束再执行的异步回调没什么问题吧。什么业务实时性要那么高啊？ 一般一个事件里面同步的不会有同个属性改来改去的情况(有这种情况优化代码更好)，如果是异步的，那MutationObserver也会异步调用，倒没什么问题

test

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var element = document.querySelector('\#test');

var observer = new MutationObserver(function(mutations) \{

mutations.forEach(function(mutation) \{

if (mutation.type == "attributes") \{

console.log('mm', new Date().getTime())

console.log("attributes changed", mutation.attributeName)

\}

\});

\});

observer.observe(element, \{

attributes: true //configure it to listen to attribute changes

\});

function clickMe()\{

console.log('111', new Date().getTime())

element.style.left = Math.random()\* 10 + 'px';

console.log('222', new Date().getTime())

element.style.left = Math.random()\* 10 + 'px';

setTimeout(function()\{

console.log('333-timeout', new Date().getTime())

element.style.left = Math.random()\* 10 + 'px';

\}, 2000)

console.log('click-end')

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 js监听div元素的宽高变化

[js监听div元素的宽高变化][js_div] [javascript][] 发布于 2019-06-27 ![4b9cb6f12946ae5fdc7efddb5c

待我称王封你为后i/ 2023年10月11日 15:14/ 0 赞/ 84 阅读

相关 JS监听dom高度变化方法总结

![bc2d7b3ba4b148ae817a9e70cfd3520b.png][]前言有时候我们需要监听dom的变化，例如有时候图片未加载完就取 dom 的高度，这样会

缺乏、安全感/ 2023年10月09日 23:39/ 0 赞/ 47 阅读

相关 MutationObserver 监听DOM对象的变化

`MutationObserver` 可以通过监听DOM对象的子节点的变化（`childList`）、属性的变化（`attributes`）和后代节点的变化（`subtree`

雨点打透心脏的1/2处/ 2023年07月17日 15:49/ 0 赞/ 12 阅读

相关 html 监听后端变化_Vue.js中 watch(深度监听)

![3614479af92b1e18b28f09a4b08bfdec.png][] ![2d0fa97e9e8d96649872706c84acab73.png][] h

「爱情、让人受尽委屈。」/ 2023年01月04日 13:10/ 0 赞/ 367 阅读

相关监测div大小变化_JavaScript监听一个DOM元素大小变化

1.需求场景开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要

谁借莪１个温暖的怀抱￠/ 2023年01月01日 06:52/ 0 赞/ 742 阅读

相关 js监听dom变化(未完善)

var MO_options = { attributes: true, childList: true,subtree:false,attributeOldValu

刺骨的言语ヽ痛彻心扉/ 2022年12月29日 06:51/ 0 赞/ 186 阅读

相关 html位置发生变化监听,html监听 --- 监听html文档结构变化

/\config属性 childList：子元素的变动 attributes：属性的变动 characterData：节点内容或节点文本的变动 subtree：所有下属

快来打我*/ 2022年10月06日 11:45/ 0 赞/ 298 阅读

相关监听 html dom 变化,js怎么监听元素属性变化

我觉得MutationObserver可以用啊，正常情况下，这个等待DOM操作结束再执行的异步回调没什么问题吧。什么业务实时性要那么高啊？一般一个事件里面同步的不会有同个属性

梦里梦外;/ 2022年10月06日 10:53/ 0 赞/ 291 阅读

相关 js监听元素尺寸变化

上代码： / @description 监听元素尺寸变化 @author: hruomei @update @dat

我会带着你远行/ 2022年08月31日 02:12/ 0 赞/ 344 阅读

相关监听文件夹变化

现象：监听文件夹的变化：如新建、修改、删除文件或者文件夹方法： 1：创建测试类设置主函数、构造观察类设置监听间隔时间、调用监听文件夹变化 ![在这里插入图片描

喜欢ヅ旅行/ 2022年03月02日 02:49/ 0 赞/ 353 阅读