Javascript函数顺序

Javascript function order

本文关键字：顺序 函数 Javascript      更新时间：2023-09-26

我有一个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'
    }

所以基本上我为我的第一个标题写了这个函数，当页面加载时"焦点"。然后我决定用相同的功能添加第二个标题。现在当我加载页面时，只加载第二个标题，而不是两个标题。

为什么??

因为您覆盖了第一个函数。不要这样设置属性…使用addEventListener或等价的代替:

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

此方法允许您根据需要注册尽可能多的事件处理程序。请注意，旧版本的IE浏览器不支持它，所以你可能需要对它进行特征检测，并在那些旧版本的IE浏览器中使用attachEvent。

当前，您只是设置属性的值。考虑下面的代码，它们实际上是等价的:

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

您正在替换onload函数

正确的解决方案是使用addEventListener添加一个事件侦听器，它们是可添加的:

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

无需替换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';
}

祝你好运!

您正在重写第二个的方法。你需要把它们合并在一起:

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

你也可以做其他答案所做的。这看起来也不错。

相关文章：