javascript - onload 不起作用，而 onmouseenter 起作用

Question

我做了一个简单的 JS 函数，并尝试用 onload="updateClock()"调用它，但没有成功。但是，如果我更改为 onmouseenter="updateClock()"它会完美运行，然后我将鼠标悬停在上面。

为什么它不起作用？

HTML:

<script src="clock.js" type="text/javascript"></script>
<section onload="updateClock();">
    <span id="clock">00:00:00</span>
</section>

JS:

function updateClock(){

    var currentTime = new Date ();

    var hours = currentTime.getHours ();
    var minuts = currentTime.getMinutes ();
    var seconds = currentTime.getSeconds ();

    //Pad with zeros
    hours = (hours < 10 ? "0" : "") + hours;
    minuts = (minuts < 10 ? "0" : "") + minuts;
    seconds = (seconds <10 ? "0" : "") + seconds;

    var time = hours + ":" + minuts + ":" + seconds;

    document.getElementById("clock").innerHTML = time;
}

Answer 1

只有 iframe 或 img 这样的元素，一般来说，可以从外部资源加载内容的元素，才会有 onload 事件。 (当然还有一些 DOM 对象，比如 window。)

快速修复是将 script 标记移到 section 之后，并使用 IIFE :

<section>
    <span id="clock">00:00:00</span>
</section>
<script src="clock.js" type="text/javascript"></script>

在 clock.js 中:

(function updateClock(){
         :
}());