关于JavaScript中的window.onload

Question

我正在介绍一个javascript类，在我们的其中一个实验中，我们被指示在头部分仅包含一个 script标签，但因window.onload事件处理程序而延迟。

我可以正常工作了，但我的问题是为什么我的imageManipulator（）函数仅在执行window时才起作用。onload= function（）{imageManipulator（）}; 而另外两个在没有{}的情况下工作正常。

同样，对于我的if语句遍历曲棍球队的原因，为什么== 0不起作用？ 我以为0是true -1是false，所以不是== 0而不是> = 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()返回找到的元素在数组中的位置；如果未找到， indexOf()返回-1 。 因此，如果您使用== 0 ，则对于New York Islanders来说将不是真的，因为indexOf()返回12而不是0 。 indexOf不返回true / false值，它返回一个头寸。

关于JavaScript中的window.onload

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-06 02:45:04

关于JavaScript中的window.onload

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-06 02:45:04

解决方案1
1 已采纳 2016-05-06 02:45:04