Javascript如何使用attach事件使此脚本与IE8及以下版本兼容

Question

如何在IE8中使用以下内容？我假设在其他线程中我使用了if-else语句。只是不确定它应该采用的形式

提前感谢

document.addEventListener("DOMContentLoaded", function() { 
var captions = document.getElementsByClassName("block1");
var newlabel = document.getElementsByClassName("block2");
for (var i = 0, c=captions.length; c>i; i++) {
captions[i].style.display = "none";
}
for (var i = 0, n=newlabel.length; n>i; i++) {
newlabel[i].style.display = "none";
}
})();

Answer 1

有四个问题需要处理：

1. 在末尾删除不正确的()(即使不使用IE8)。

   解决方案：只需移除它们。

2. 必要时使用attachEvent代替addEventListener。

   解决方案：根本不要使用事件，或者检测您拥有的事件。

3. 处理IE8没有DOMContentLoaded的事实。

   解决方案：将脚本放在HTML的末尾，而不是使用事件。或者使用window.load，但这种情况发生得很晚。

4. 处理IE8没有getElementsByClassName的事实。

   解决方案：改为使用querySelectorAll，这是IE8所拥有的。

同样，处理#2和#3的最简单方法是简单地将代码放在文档末尾的脚本标记中，就在关闭</body>元素之前。然后，您根本不必使用事件，只需运行代码即可；元素将在那里并准备好编写脚本：

<!-- content... -->
<script>
(function() {
var i, c, n;
var captions = document.querySelectorAll(".block1");
var newlabel = document.querySelectorAll(".block2");
for (i = 0, c = captions.length; c > i; i++) {
captions[i].style.display = "none";
}
for (i = 0, n = newlabel.length; n > i; i++) {
newlabel[i].style.display = "none";
}
})();
</script>
</body>
</html>

如果你真的想让它基于事件，那么：

function handler() {
var i, c, n;
var captions = document.querySelectorAll(".block1");
var newlabel = document.querySelectorAll(".block2");
for (i = 0, c = captions.length; c > i; i++) {
captions[i].style.display = "none";
}
for (i = 0, n = newlabel.length; n > i; i++) {
newlabel[i].style.display = "none";
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler);
}
else if (window.attachEvent) {
window.attachEvent("onload", handler);
}

(请注意，在这两种情况下，我只在函数顶部声明了i、c和n一次。不管怎样，这就是代码所做的，因为var是如何工作的，所以…)