Question

我正在介绍javascript课程，对于我们的一个实验室，我们被指示在head部分只有 ONE 脚本标记，但是被window.onload事件处理程序延迟。

我得到了一切，但我的问题是为什么我的imageManipulator（）函数只在我执行window.onload = function（）{imageManipulator（）}时才起作用而另外2个没有{}的情况下工作正常。

同样，我的if语句循环通过曲棍球队，为什么赢得＆= t == 0工作？我认为0是真的-1是假的所以不应该是== 0而不是＆gt; = 0？

我的代码在这里：

<html>
<head>
<script>
    function christmasDayCalculation()
    {
        var currentDate = new Date();
        var christmas = new Date(2016, 11, 25);

        var ms = christmas - currentDate;
        var seconds = ms / 1000;
        var minutes = seconds / 60;
        var hours = minutes / 60;
        var days = hours / 24;

        alert(Math.round(days) + " days until christmas");
    }

    function hockeyTeams()
    {
        var hockeyTeams = ['Anaheim Ducks', 'Arizona Coyotes', 'Calgary Flames', 'Edmonton Oilers', 
                       'Los Angeles Kings', 'San Jose Sharks', 'Vancouver Canucks', 'Colorado Avalanch',
                       'Dallas Stars', 'Minnesota Wild', 'St.Louis Blues', 'Winnipeg Jets', 'Boston Bruins', 
                       'Buffalo Sabres', 'Detroit Redw Wings', 'Florida Panthers', 'Montreal Canadiens', 
                       'Ottowa Senators', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Colombus Blue Jackets', 
                       'New Jersey Devils', 'New York Islanders', 'New York Rangers', 'Philadelphia Flyers', 
                       'Pittsburgh Penguins', 'Washington Capitals']

        for(i = 0; i < hockeyTeams.length; i++)
        {
            if(hockeyTeams[i].indexOf("an") >= 0)
            {
                alert(hockeyTeams[i]);
            }
        }
    }

    function imageManipulator()
    {
        var numberOfImages = document.images.length;

        for(i = 0; i < numberOfImages; i++)
        {
            document.images[i].style.border = "solid red"; // DOM 0 required per lab instructions
            document.getElementsByTagName("img")[i].style.width = "100px"; // DOM 1 required per lab instructions
        }
    }

    window.onload = christmasDayCalculation();
    window.onload = hockeyTeams();
    window.onload = function() { imageManipulator() };
</script>
</head>
<body>
    <img src="cat.jpg">
    <img src="dog.jpg">
    <img src="bird.jpg">
</body>
</html>

谢谢！

Answer 1

在window.onload中运行某些内容可确保在函数运行之前加载所有DOM元素。如果函数访问或修改DOM，则需要使用它。

christmasDayCalculation()和hockeyTeams()无法访问DOM，因此不需要在window.onload中运行它们。在加载窗口时，您实际上并没有运行它们，因为您没有将function()放在它们周围。当你这样做

window.onload = hockeyTeams();

它立即运行该函数，然后将它返回的值赋给window.onload。

写作时

window.onload = function() { imageManipulator(); };

它不会立即运行imageManipulator()，它会创建一个可以调用它的函数。你也可以写：

window.onload = imageManipulator;

请注意，函数名后面没有()。这将变量设置为对函数的引用，而不是调用函数。

最后，分配给window.onload多次是没有意义的。这是一个属性，它只能容纳一个值。重复分配将替换先前的值，并且在加载文档时，它将仅执行最后一个。如果你想做多件事，你应该将它们组合成一个函数：

window.onload = function() {
    christmasDayCalculation();
    hockeyTeams();
    imageManipulator();
};

对于第二个问题，indexOf()会返回数组中找到的元素的位置，如果找不到则会-1。因此，如果您使用== 0，那么New York Islanders就不会这样，因为indexOf()会返回12，而不是0。 indexOf没有返回true / false值，它会返回一个位置。

关于javascript中的window.onload

1 个答案: