标签: mutation-events

如何在元素更改时播放声音,例如SO Chat吗？

我希望在页面上元素发生变化时播放声音.我知道如何做到这一点,但我不能让它发挥仅在第一个变化,而不要以后做,直到用户聚焦窗口(标签),并再次模糊了.

我目前的代码:

var notif = new Audio('http://cycle1500.com/sounds/infbego.wav');
if (window.innerHeight === window.outerHeight) {
  $(window).bind('DOMNodeInserted', function() {
      notif.play();
  });
}

Run Code Online (Sandbox Code Playgroud)

javascript jquery html5 html5-audio mutation-events

nyu*_*a7h

2013 09-24

10
推荐指数

1
解决办法

688
查看次数

Mutation Observer无法检测元素的dom移除

所以,我认为这将是非常直接的,曾经是一个DOMNodeRemoved事件,但是已经弃用了,相反,MutationObserver应该被使用,事情是,它不会触发,即使是适当的配置.

根据这篇关于从变异事件迁移到变异观察者的文章,检测节点的dom去除的配置是{ childList: true, subtree: true },并且这适合给予这childList是必须的并且subtree意味着它将捕获突变不仅仅是目标,而且还要根据目标的后代来观察到mdn文章.

无论如何,我已经做了一个jsfiddle的问题,它是非常直接的,<button>删除<div>和观察者应该记录变异记录,但它没有,看看你能搞清楚:)

HTML

<div>Oh my god karen, you can't just ask someone why they're white.</div>
<button>^Remove</button>

Run Code Online (Sandbox Code Playgroud)

JavaScript的

div = document.querySelector("div");
callback = function(records){
    console.log(records);
}
config = {
    childList:true,
    subtree:true
}
observer = new MutationObserver(callback);
observer.observe(div,config);

button = document.querySelector("button");
button.addEventListener("click",function(){
    div.parentNode.removeChild(div);
});

Run Code Online (Sandbox Code Playgroud)

谢谢!

javascript dom mutation-observers mutation-events

und*_*ned

lucky-day

10
推荐指数

1
解决办法

6513
查看次数

DOM Mutation Observers比DOM Mutation事件慢吗？

以下代码利用DOM Mutation Event DOMNodeInserted来检测body元素的存在并将其innerHTML包装到包装器中.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        function DOMmanipulation() {
            if (document.body) {
                document.removeEventListener('DOMNodeInserted', DOMmanipulation);
                // DOM manipulation start
                document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
                // DOM manipulation end
            }
        }
        document.addEventListener('DOMNodeInserted', DOMmanipulation);
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

尽管包装成功,但是有一个错误表明找不到节点.这个问题的答案解释说,这是因为当jQuery被加载时,它div在主体中添加了一个元素来进行一些测试,但它无法删除该div元素,因为该元素已被包装到包装器中,因此它不是一个孩子身体的元素了.

上面的实验告诉我们DOMNodeInserted事件比jQuery的测试更快,因为jQuery的test element(div)在被jQuery删除之前就被包装了.

现在,下面的代码可以实现相同的操作,并且它使用新引入的DOM Mutation Observers.截至此时(2012-07-11),它仅适用于Chrome 18及更高版本.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> …

Run Code Online (Sandbox Code Playgroud)

javascript performance events observers mutation-events

Ian*_* Y.

2017 05-23

9
推荐指数

2
解决办法

4551
查看次数

功能检测:JavaScript中的突变事件可用性？

我的JavaScript如何检测事件是否可用？

我知道一些很棒的事件兼容性表,但我需要使用特征检测,而不是浏览器嗅探和查找表.

具体来说,我的JS充分利用了DOM突变事件(DOMNodeInserted和DOMSubtreeModified) - 除了(当然)Internet Explorer之外,它在所有浏览器中都很有用.

那么,我如何检测浏览器是否支持DOMNodeInserted？

javascript cross-browser feature-detection dom-events mutation-events

Bro*_*ams

2019 09-23

8
推荐指数

1
解决办法

2176
查看次数

为什么MutationObserver代码不能在Chrome 30上运行？

从http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers我得到以下代码:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
 alert('run');
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

var divElement = document.createElement('div');
divElement.innerHTML = 'div element';
document.querySelector('body').appendChild(divElement);

Run Code Online (Sandbox Code Playgroud)

jsFiddle:http://jsfiddle.net/cUNH9

如您所见,我们应该看到一个警报,因为div元素已插入DOM.但看起来MutationObserver代码不会运行.如何成功运行MutationObserver代码？

javascript html5 mutation mutation-observers mutation-events

wei*_*lou

2015 09-23

8
推荐指数

1
解决办法

4681
查看次数

Disqus是否有公共事件要附加？

我需要在disqus表单获得更新后执行一些重新计算.一条新评论,错误信息仅举几例.本质上任何导致Disqus iframe垂直扩展的事件.检查了API,但没有发现任何公共事件.似乎事件不是公开可访问的atm.所以第一个问题是 - Disqus是否有任何公共事件要附加？

第二个是 - 如果我无法附加来自Disqus的事件我想知道MutationEvent会不会为我考虑一下Disqus内容是否在iFrame中？

javascript events disqus mutation-events

spl*_*ter

2013 09-16

6
推荐指数

1
解决办法

836
查看次数

有一个元素的引用,如何附加到文档后检测？

我正在开发一个JavaScript模块,它对将要使用它的环境一无所知.

而且,从技术上讲,我想实现下一个功能:

onceAppended(element, callback);

Run Code Online (Sandbox Code Playgroud)

element是一个HTMLElement和该元素的父可以在模块初始化过程中是未知的.callback是一个功能,必须element在页面上显示后触发.

如果元素附加到文档,则必须立即调用回调.如果element尚未附加,则功能将在文档上出现callback一次element.

问题是,我们可以element使用DOMNodeInserted突变事件来检测追加事件.但是突变事件现在已被弃用.而且似乎MutationObserver无法处理这项任务,可以吗？

这是我的代码片段:

function onceAppended (element, callback) {
    let el = element,
        listener;
    while (el.parentNode)
        el = el.parentNode;
    if (el instanceof Document) {
        callback();
        return;
    }
    if (typeof MutationObserver === "undefined") { // use deprecated method
        element.addEventListener("DOMNodeInserted", listener = (ev) => {
            if (ev.path.length > 1 && ev.path[ev.length - 2] instanceof Document) …

Run Code Online (Sandbox Code Playgroud)

javascript dom javascript-events mutation-observers mutation-events

Zit*_*tRo

2016 07-26

6
推荐指数

1
解决办法

212
查看次数

如何在页面上加载时更改HTML内容

我在我们的网站上进行A/B测试,我做的大部分工作都是在一个JS文件中,在文件顶部加载之前,其他任何东西都被渲染,但是在jQuery加载之后,它有时会派上用场.

举一个非常简单的改变H1标签的例子,我通常会在头部注入一个样式来将H1不透明度设置为0,然后在DOMContentLoaded上,我会操纵H1内容,然后将不透明度设置为1.是为了避免在更改发生之前闪现旧内容 - 隐藏整个对象在眼睛上更优雅.

我已经开始研究MutationObserver API了.我之前在使用覆盖对话框中更改内容时使用过这个用户可以打开的内容,这似乎是一个非常酷的方法,我想知道是否有人设法使用MutationObserver来收听文件,因为它是第一次加载/在首次渲染之前和DOMContentLoaded之前解析并更改文档？

这种方法可以让我更改H1内容而不必隐藏它,更改它,然后显示它.

到目前为止,我已经尝试但失败了,刚刚结束了关于即将到来的突变事件的阅读,并想知道我是否正在尝试做一些不可能的事情.然而,我们(不是我)已经设法将机器人放在火星上,所以我希望我能解决这个问题.

因此,可以使用MutationObservers在加载/解析页面时动态更改HTML内容吗？

感谢您的帮助或任何指示.

问候,尼克

javascript ab-testing optimizely mutation-observers mutation-events

Nic*_*eek

lucky-day

6
推荐指数

1
解决办法

2688
查看次数

使用Mutation Observer检测添加到DOM的元素

我在拖动事件后向DOM中添加了一些元素。我需要检测此元素以及添加此元素的时间。我使用Mutation Observer，但是代码有问题：

var targetNodes = $('.mvly');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver (mutationHandler);
var obsConfig = { childList: true, characterData: true, attributes: true, subtree: true };

targetNodes.each(function(){
    myObserver.observe(this, obsConfig);
} );

function mutationHandler (mutationRecords) {
    mutationRecords.forEach ( function (mutation) {
        if (typeof mutation.addedNodes == "object") {
            console.log('test');
        }
    });
}

Run Code Online (Sandbox Code Playgroud)

任何人都可以帮忙，谢谢。

javascript jquery html5 mutation-events

Luk*_*kas

lucky-day

5
推荐指数

1
解决办法

3093
查看次数

检测具有特定 ID 的元素何时插入 DOM 中的最有效方法是什么

正如标题所示，我想检测当具有特定 id 或 CSS 类的元素插入 DOM 时的确切时间戳（并可能检测它何时被删除）。最明显的方法是通过使用document.getElementById我想要查找的元素的 id 进行调用来定期轮询文档，但这种方法不是很准确，并且如果我想要检测多个元素，则可能会非常消耗性能。

我查看了Mutation Events和Mutation Observers，但据我了解，为了检测元素是否被插入或删除，我必须向根 DOM 元素添加一个监听器，如果我需要的话，这会严重影响性能每次在页面中插入或删除元素时都会执行额外的 JS。

有没有我不知道的更优化的解决方案？另外，如果我不使用外部 JS 库，甚至 jQuery，我会更喜欢。

javascript dom mutation-observers mutation-events

Col*_*tru

lucky-day

4
推荐指数

1
解决办法

890
查看次数

Firefox中的文本框的onpropertychange？

如何onpropertychange使用JavaScript 处理Firefox中的文本框？

以下是一个例子:

var headerBGColorTextBox = document.getElementById('<%= tbHeaderBGColor.ClientID %>');

if (headerBGColorTextBox != null) {
  headerBGColorTextBox.pluggedElement = document.getElementById('<%= trHeaderBG.ClientID %>');
  headerBGColorTextBox.onpropertychange = function() {
    alert('function called');
    if (event.propertyName == 'style.backgroundColor' && event.srcElement.pluggedElement != null)
      alert(event.propertyName);
    event.srcElement.pluggedElement.style.backgroundColor = event.srcElement.style.backgroundColor;
  };
}

Run Code Online (Sandbox Code Playgroud)

javascript firefox events dom mutation-events

Tus*_*aru

2013 09-16

3
推荐指数

1
解决办法

1万
查看次数