Fatal编程技术网
  • javascript/
  • Javascript 如何检测div或body中的变化？

Javascript 如何检测div或body中的变化？

javascript html css dojo

Javascript 如何检测div或body中的变化？,javascript,html,css,dojo,Javascript,Html,Css,Dojo,我有以下脚本，我需要检测： 内容元素已更改（例如大小/位置）或 主体元素已更改（例如大小/位置） 我无法将这种逻辑应用于按钮本身 有什么活动可以参加？ 你能提供一个代码示例吗 window.App={ 开始：函数（）{ var btn=document.getElementById（'addContent'）； btn.addEventListener（'click'，函数（）{ var body=document.getElementsByTagName（'body'）[0]； bod

我有以下脚本，我需要检测：

  • 内容元素已更改（例如大小/位置）或
  • 主体元素已更改（例如大小/位置）
我无法将这种逻辑应用于按钮本身

有什么活动可以参加？ 你能提供一个代码示例吗


window.App={
开始：函数（）{
var btn=document.getElementById（'addContent'）；
btn.addEventListener（'click'，函数（）{
var body=document.getElementsByTagName（'body'）[0]；
body.innerHTML+='后来添加-Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是印刷行业的标准虚拟文本，当时一位不知名的印刷商用一台打字机将其打印出来，然后拼凑成一本字体样本书。它不仅存活了五个世纪，而且还跨越到了elec电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行。
'；
});
//---
//不工作，我需要的内容
window.addEventListener（'resize'，函数（）{
console.log（'content/window/resize'）；
});
var content=document.getElementById（'content'）；
content.addEventListener（'change'，function（）{
console.log（'content/div/resize'）；
}.约束（这个）；
}
};
添加内容！
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本
MutationObserver提供了一种对DOM中的任何更改做出反应的方法

阅读更多关于或

还有这个线程

检查这个

使用“domandeinserted”代替“change”，并使用ID内容更改div的html，而不是body的innerHTML

您可以在浏览器控制台中看到
content/div/resize
，这只是另一个建议（不确定是否符合您的要求），您可以创建自定义事件，并随时触发它：

window.App={
开始：函数（）{
var customEvent=新事件（“customEvent”），//您的自定义事件
content=document.getElementById（'content'），
btn=document.getElementById（'addContent'）；
btn.addEventListener（'click'，函数（）{
var body=document.getElementsByTagName（'body'）[0]；
body.innerHTML+='后来添加-Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是印刷行业的标准虚拟文本，当时一位不知名的印刷商用一台打字机将其打印出来，然后拼凑成一本字体样本书。它不仅存活了五个世纪，而且还跨越到了elec电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行。
'；
//触发它
内容。dispatchEvent（customEvent）；
});
content.addEventListener（'customEvent'，函数（）{
console.log（'content/div/resize'）；
});
}
};
App.start（）


添加内容！
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本


Change事件对div/body元素不起作用。它只对表单元素有效。我能问一下是什么导致了身体的变化吗？Js？在这一点上，您可以触发您试图转换为change（）的脚本？是的，来自js，但基本上我想集中这个行为，因为我有十几个组件可以改变主体。只是想知道…html视口中是否存在任何事件？这绝对是实现目标的最完整和最有效的方法。MutationObserver的选项非常广泛。你可以很好地调整它必须做出反应的事件。在搜索一个能够捕获反应状态更新的函数一段时间后，这就成功了，在Firefox 73.0b11 Chrome 79和IE 9上进行了测试

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script>
        window.App = {
            start: function () {
                var btn = document.getElementById('addContent');
                btn.addEventListener('click', function () {
                    var body = document.getElementsByTagName('body')[0];
                    body.innerHTML += '<p>ADDED LATER - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>';
                });

                //---
                // does not work i need the content
                window.addEventListener('resize', function () {
                    console.log('content / window / resize');
                });

                var content = document.getElementById('content');
                content.addEventListener('change', function () {
                    console.log('content / div / resize');
                }.bind(this));
            }
        };
    </script>
</head>


<body onload="App.start();">
    <div id="content">
        <button id="addContent" type="button">Add content!</button>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</body>

</html>