gpt4 book ai didi

dom - DOM 突变事件库?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:37:08 28 4
gpt4 key购买 nike

当内容添加到网页时,我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。

我想使用 DOM 突变事件,但它们并非在所有浏览器中都可用。是否有为此提供后备计划的跨浏览器库?

此外,我很想知道 Internet Explorer 9 是否支持这些 DOM 突变事件。

谢谢!

最佳答案

有两种方法...

一,你可以拍摄dom的快照(var snap = document.body),将其与100ms后的dom进行比较,然后将snap重置为body再次。我会让您在如何比较它们方面发挥创意:迭代似乎是常见的答案。它不漂亮。

另一种选择是在您创建的任何函数中都有一个特殊函数,用于在您的应用程序中添加/删除元素。此函数将仅遍历您添加(或销毁)的元素并查找匹配项。

/* 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]);
}
}
}
}

这可能并不完美,但它应该让您知道要去哪里。调用此函数 (addingToDom),将您刚刚添加的元素作为参数传递。创建一个类似的函数来删除元素(或相同的函数,但设置一个单独的回调数组)。

这是我用来测试一些想法的当前(大而杂乱)代码的推断。我已经用这个 shim 测试了早在 ie7 时的匹配选择器,它似乎工作得很好!

我已经考虑过但没有研究过元素具有某种参数的可能性,这些参数可以设置为添加时调用的函数,将自身作为参数传递。但是,这可能有些牵强。

关于dom - DOM 突变事件库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4424923/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com