元素添加到页面时的事件

Question

这在前面已经讨论过了:如何使用Jquery将元素添加到页面时执行操作？

每当div添加到页面时,响应者建议触发自定义事件.但是,我正在撰写Chrome扩展程序,但无法访问页面源代码.我有什么选择？我想在理论上我可以setInterval()用来不断搜索元素的存在并添加我的动作,如果元素在那里.

Answer 1

由于DOM Mutation事件现在已被弃用(请参见底部的注释),并且您无法控制插入的元素,因为它们是由其他人的代码添加的,因此您唯一的选择是不断检查它们.

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified

    // call the function again after 100 milliseconds
    setTimeout( checkDOMChange, 100 );
}

调用此函数后,它将每隔xxx毫秒运行一次.我选择了100,即1/10(十分之一秒).除非你需要捕获实时元素,否则它应该足够了.

编辑

正如Ben Davis评论的那样,DOM Level 4规范引入了Mutation观察者(也在Mozilla文档上),它取代了已弃用的变异事件.

Answer 2

实际的答案是"使用变异观察者"(如本问题中所述:确定是否已动态地将HTML元素添加到DOM中),但是支持(特别是在IE上)是有限的(http://caniuse.com/mutationobserver) .

所以实际的ACTUAL答案是"最终使用变异观察者.但是现在就去找Jose Faeti的答案":)

Answer 3

您还可以利用CSS3 Animation事件,以便在将特定元素添加到DOM时收到通知:http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Answer 4

你可以使用livequeryjQuery的插件.您可以提供选择器表达式,例如:

$("input[type=button].removeItemButton").livequery(function () {
    $("#statusBar").text('You may now remove items.');
});

每次removeItemButton添加类的按钮时,状态栏中都会显示一条消息.

在效率方面,您可能希望避免这种情况,但无论如何,您可以利用插件而不是创建自己的事件处理程序.

重温回答

上面的答案仅用于检测是否已通过插件将项添加到DOM.

但是,最有可能的是,一种jQuery.on()方法更合适,例如:

$("#myParentContainer").on('click', '.removeItemButton', function(){
          alert($(this).text() + ' has been removed');
});

例如,如果您有动态内容应响应点击次数,则最好使用事件将事件绑定到父容器jQuery.on.

Answer 5

ETA 24 Apr 17 我想用一些async/ await魔法来简化这一点,因为它使它更加简洁:

使用相同的promisified-observable:

const startObservable = (domNode) => {
  var targetNode = domNode;

  var observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
  };

  return new Promise((resolve) => {
      var observer = new MutationObserver(function (mutations) {
         // For the sake of...observation...let's output the mutation to console to see how this all works
         mutations.forEach(function (mutation) {
             console.log(mutation.type);
         });
         resolve(mutations)
     });
     observer.observe(targetNode, observerConfig);
   })
} 

您的呼叫功能可以简单如下:

const waitForMutation = async () => {
    const button = document.querySelector('.some-button')
    if (button !== null) button.click()
    try {
      const results = await startObservable(someDomNode)
      return results
    } catch (err) { 
      console.error(err)
    }
}

如果你想添加一个超时,你可以使用一个简单的Promise.race模式如下证明:

const waitForMutation = async (timeout = 5000 /*in ms*/) => {
    const button = document.querySelector('.some-button')
    if (button !== null) button.click()
    try {

      const results = await Promise.race([
          startObservable(someDomNode),
          // this will throw after the timeout, skipping 
          // the return & going to the catch block
          new Promise((resolve, reject) => setTimeout(
             reject, 
             timeout, 
             new Error('timed out waiting for mutation')
          )
       ])
      return results
    } catch (err) { 
      console.error(err)
    }
}

原版的

你可以在没有库的情况下做到这一点,但你必须使用一些ES6的东西,所以要认识到兼容性问题(即,如果你的观众主要是Amish,luddite,或者更糟的是,IE8用户)

首先,我们将使用MutationObserver API构造一个观察者对象.我们将这个对象包装在一个promise中,并且resolve()当回调被触发时(h/t davidwalshblog)david walsh博客关于突变的文章:

const startObservable = (domNode) => {
    var targetNode = domNode;

    var observerConfig = {
        attributes: true,
        childList: true,
        characterData: true
    };

    return new Promise((resolve) => {
        var observer = new MutationObserver(function (mutations) {
            // For the sake of...observation...let's output the mutation to console to see how this all works
            mutations.forEach(function (mutation) {
                console.log(mutation.type);
            });
            resolve(mutations)
        });
        observer.observe(targetNode, observerConfig);
    })
} 

然后,我们将创建一个generator function.如果你还没有使用过这些,那么你就错过了 - 但是一个简短的概要是:它像一个同步函数一样运行,当它找到一个yield <Promise>表达式时,它会以非阻塞的方式等待承诺实现了(发电机不仅仅是这个,但这是我们在这里感兴趣的).

// we'll declare our DOM node here, too
let targ = document.querySelector('#domNodeToWatch')

function* getMutation() {
    console.log("Starting")
    var mutations = yield startObservable(targ)
    console.log("done")
}

关于生成器的一个棘手的部分是它们不像正常函数那样"返回".因此,我们将使用辅助函数来像常规函数一样使用生成器.(再次,h/t到dwb)

function runGenerator(g) {
    var it = g(), ret;

    // asynchronously iterate over generator
    (function iterate(val){
        ret = it.next( val );

        if (!ret.done) {
            // poor man's "is it a promise?" test
            if ("then" in ret.value) {
                // wait on the promise
                ret.value.then( iterate );
            }
            // immediate value: just send right back in
            else {
                // avoid synchronous recursion
                setTimeout( function(){
                    iterate( ret.value );
                }, 0 );
            }
        }
    })();
}

然后,在预期的DOM突变发生之前的任何时刻,只需运行即可runGenerator(getMutation).

现在,您可以将DOM突变集成到同步样式的控制流中.怎么回事呢.

Answer 6

有一个很有前途的名为Arrive的javascript库,一旦浏览器支持变得司空见惯,它就像是开始利用变异观察者的好方法.

https://github.com/uzairfarooq/arrive/

Answer 7

看看这个插件，它确实做到了这一点 - jquery.initialize

它的工作原理与 .each 函数完全相同，不同之处在于它需要您输入的选择器并监视将来添加的与此选择器匹配的新项目并初始化它们

初始化看起来像这样

$(".some-element").initialize( function(){
    $(this).css("color", "blue");
});

但现在如果.some-element页面上出现新的元素匹配选择器，它将立即初始化。

添加新项目的方式并不重要，您不需要关心任何回调等。

因此，如果您添加新元素，例如：

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

它将立即初始化。

插件基于MutationObserver