当内容添加到网页时,我需要触发一个操作。更新可以具有不同的性质(例如 AJAX、延迟脚本、用户操作),并且不受我的控制。
我想使用 DOM 突变事件,但它们并非在所有浏览器中都可用。是否有跨浏览器库提供后备计划?
另外,我很想知道 Internet Explorer 9 是否支持这些 DOM 突变事件。
Thanks!
有两种方法可以做到这一点...
一,你可以拍摄 dom 的快照(var snap = document.body
),与100ms后的dom进行比较,然后重置snap
再次到身体。我会让你发挥创意来比较它们:迭代似乎是常见的答案。这并不漂亮。
另一种选择是在您创建的用于在应用程序中添加/删除元素的任何函数中具有特殊函数。该函数将仅迭代您添加(或销毁)的元素并查找匹配项。
/* 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),传递刚刚添加的元素作为参数。创建一个类似的函数来删除元素(或相同的函数,但条件是一个单独的回调数组)。
这是我用来测试一些想法的当前(大而混乱)代码的推断。我已经用这个垫片测试了早至 ie7 的匹配选择器,它似乎工作得很好!
我已经考虑过,但没有研究过,元素具有某种参数的可能性,这些参数可以设置为一个函数,该函数在添加时被调用,并将其自身作为参数传递。但是,这可能是牵强的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)