JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 聆听Chrome扩展程序页面上显示的元素的创建并触发事件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Chrome扩展程序是否可以侦听尚未创建的元素的外观?

说用户点击一个按钮,点击事件创建一个元素< div id ='myDiv'> My Div< / div>并将其添加到页面/ DOM.是否可以设置一个侦听器,当该元素出现时会自动触发事件?

或者我必须诉诸于轮询该页面并检查这个元素每X个毫秒数?

jQuery和其他库不是我的选择btw.

解决方法

新的 DOM4 MutationObserver可以做到这一点.我不认为它得到广泛的支持,但幸运的是,它是Chrome支持的,作为WebKitMutationObserver.

从链接的教程页面修改,它会在页面上的任何地方侦听突变:

var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
            if(mutation.addedNodes[i].id == "myDiv") {
                // target node added,respond now...
            }
        }
    });
});
observer.observe(document,{ subtree: true });

如果您可以将observer.observe中的听力缩小到比文档更具体的元素,那将给您一些性能提升.

大佬总结

以上是大佬教程为你收集整理的javascript – 聆听Chrome扩展程序页面上显示的元素的创建并触发事件全部内容,希望文章能够帮你解决javascript – 聆听Chrome扩展程序页面上显示的元素的创建并触发事件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: