DOM突变事件库？ [英] Library for DOM mutation events?

问题描述

当内容被添加到网页时，我需要触发一个动作。更新可能有不同的性质（例如AJAX，延迟脚本，用户操作），不在我的控制之下。

I need to trigger an action when content is added to a Web page. The updates can be of different nature (AJAX, delayed scripts, user action for example) and are not under my control.

我想使用DOM突变事件，但他们在所有浏览器中都不可用。有没有跨浏览器库，这提供了一个回退计划？

I wanted to use DOM mutation events, but they are not available in all browsers. Are there cross-browser libraries for this, that offer a fallback plan?

另外，我有兴趣知道Internet Explorer 9是否将支持这些DOM突变事件。

Also, I'd be interested to know if Internet Explorer 9 will support these DOM mutation events.

谢谢！

推荐答案

有两种方法可以做到这一点。

There are two ways to do this...

一，您可以拍摄一个domㄧa的快照（ var snap = document.body ），比较然后在100ms之后，然后将 snap 重新设置到身体。我会让你有创意的如何比较它们：迭代似乎是常见的答案。这不是很漂亮。

One, you can take a snapshot of the dom (var snap = document.body), compare that to the dom 100ms later and then reset snap to the body again. I'll let you be creative on how to compare them: iteration seems to be the common answer. It's not pretty.

另一个选项是在您创建的任何函数中添加/删除元素的特殊功能。这个函数只会迭代你添加（或销毁）的元素，并寻找一个匹配。

The other option is to have a special function in any functions you create that add/remove elements in your application. This function would iterate through just the elements you add (or destroy) and look for a match.

/* Shim matchesSelector */
if (!Element.prototype.matchesSelector) {
    Element.prototype.matchesSelector =
    Element.prototype.matches ||
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector;
}

function addingToDom(elm){

    /* Whichever method you want to use to map selectors to functions */
    var callbacks = array(['.class', fn-reference1], ['#id', fn-reference2], ['div', fn-reference3]);

    /* go through all the elements you're adding */
    for (var i = 0; i<elm.length; ++i){
        /* go through all the selectors you're matching against */
        for (var k = 0; k<callbacks.length ++k){
            if(elm[i].matchesSelector(callbacks[k][0])){
                /* call function with element passed as parameter */
                callbacks[k][1](elm[i]);
            }
        }
    }
}

可能不完美，但它应该给你一个头脑的想法。调用此函数（addsToDom）传递刚刚添加的元素作为参数。创建一个类似的函数来删除元素（或相同的函数，但条件单独的回调数组）。

That may not be perfect, but it should give you an idea of where to head. Call this function (addingToDom) passing the elements you just added as the argument. Create a similar function for deleting elements (or same function, but condition a separate array of callbacks).

这是一个外推当前（大而凌乱）的代码用来测试一些想法。我已经使用这个垫片测试了与ie7相匹配的选择器，而且它似乎工作得很好！

This is an extrapolation of a current (large and messy) code I'm using to test out some ideas. I've tested matches selector as far back as ie7 with this shim, and it seems to work great!

我考虑过，但没有看到，的元素具有某种参数，可以将其设置为在添加时调用的函数，将其自身作为参数。但是，这可能是牵强的。

I've considered, but not looked in to, the possibility of the element having some sort of parameter that could be set as a function that gets called when it's added, passing itself as a parameter. BUT, that's probably far-fetched.

这篇关于DOM突变事件库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！