Javascript函数顺序答案

【问题标题】：Javascript function orderJavascript函数顺序
【发布时间】：2013-03-21 18:54:55
【问题描述】：

太好了，我遇到了 JS 问题。我对 Web 开发还很陌生，所以我不完全确定我的 JS 做错了什么。

//create script for #mainHeading focus @ pageload -- heading 1
    window.onload = function() {
        var mainHeading = document.getElementById("mainHeading");
        mainHeading.style.textShadow = '0px 0px 0px #fff'
    }

//create script for #subHeading focus @ pageload -- heading 2
    window.onload = function() {
        var subHeading = document.getElementById("subHeading");
        subHeading.style.textShadow = '0px 0px 0px #fff'
    }

所以基本上我为我的第一个标题编写了在页面加载时“聚焦”的函数。然后我决定添加第二个具有相同功能的标题。现在，当我加载我的页面时，只加载第二个标题，而不是两者。

这是为什么呢？？

【问题讨论】：

标签： javascript order-of-execution

【解决方案1】：

因为您要覆盖第一个函数。不要这样设置属性...改用addEventListener 或等效项：

window.addEventListener("load", function () {
    // First event handler
});
window.addEventListener("load", function () {
    // Second event handler
});

此方法允许您根据需要注册尽可能多的事件处理程序。请注意，Internet Explorer 的旧版本不支持它，因此您可能需要对其进行功能检测并在旧 IE 版本中使用 attachEvent。

目前，您只是设置属性的值。考虑以下代码，它实际上是等效的：

var obj = {};
obj.x = 10;
obj.x = 20;
console.log(obj.x); // 20

【讨论】：

【解决方案2】：

您正在替换 onload 函数。

正确的解决方案是使用addEventListener 添加一个事件监听器，它们是相加的：

window.addEventListener('load', function1);
window.addEventListener('load', function2);

【讨论】：

【解决方案3】：

无需替换您的 onload 函数，只需向其添加说明即可。不错的老派，因此跨浏览器兼容：

window.onload = function() {
    var mainHeading = document.getElementById("mainHeading"),
         subHeading = document.getElementById("subHeading");
    mainHeading.style.textShadow = '0px 0px 0px #fff';
    subHeading.style.textShadow = '0px 0px 0px #fff';
}

祝你好运！

【讨论】：

【解决方案4】：

您正在覆盖第二个方法。您需要将它们合并在一起：

window.onload = function() {
    var mainHeading = document.getElementById("mainHeading"),
        subHeading = document.getElementById("subHeading");

    mainHeading.style.textShadow = subHeading.style.textShadow = 
                                                  '0px 0px 0px #fff';
};

您也可以执行其他答案的操作。看起来也不错。

【讨论】：