Javascript 这就是您合并Onload事件的方式吗？_Javascript_Html_Events_Onload

Javascript 这就是您合并Onload事件的方式吗？

javascript html events

Javascript 这就是您合并Onload事件的方式吗？,javascript,html,events,onload,Javascript,Html,Events,Onload,我有一个简短的问题。我试图在HTML5中加入一个onload事件。这是我的代码，但它拒绝工作。请让我知道我做错了什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Animation</title> <script> document.getElement

我有一个简短的问题。我试图在HTML5中加入一个onload事件。这是我的代码，但它拒绝工作。请让我知道我做错了什么

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Animation</title>

    <script>
        document.getElementById('videoBackground').onload = function()
        {
            document.body.style.backgroundColor = 'black';
        }
    </script>

    <script type="text/javascript" src="js/animCD.js"></script>    
    <link rel="stylesheet" href="style.css" type="text/css" />

    </head>
    <body>

    <video id="videoBackground" poster="img/loading.png" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
        <source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">      
    </video>


动画
document.getElementById（'videoBackground'）。onload=function（）
{
document.body.style.backgroundColor='黑色'；
}

指定

someElement.onload=function（）{}

是创建一般意义上的onload处理程序的方式。无法工作的原因是脚本块出现在相关元素之前并立即运行，此时

document.getElementById（）

无法找到该元素，因为它尚未被解析

您可以通过将脚本块移动到元素后面的某个位置（许多人将脚本放在正文的末尾）来解决此问题，或者通过在页面的onload处理程序中调用它来解决此问题：

window.onload = function() {
    document.getElementById('videoBackground').onload = function() {
        document.body.style.backgroundColor = 'black';
    }
};

虽然页面/窗口的onload应该在加载所有内容后调用，所以我不确定是否有必要从那里创建更多的onload处理程序

我注意到您的html中还有一个

onload=“function（）”

属性。这是指定处理程序的另一种方式，尽管内联事件属性不是执行操作的首选方式，但您需要输入实际函数名

onload=“someFunction（）”

来调用在别处定义的命名函数，或者直接输入代码：

<video ... onload="document.body.style.backgroundColor='black';" ...>

在执行

getElementById（'videoBackground'）

时，id为

videoBackground

的元素还不存在

将脚本移动到创建

videoBackground

元素的下方，或者在DOM加载后使用

document.onload

运行脚本。头和html标记在原始html中关闭？您所说的“它拒绝工作”到底是什么意思？你在浏览器的JavaScript控制台中看到任何错误了吗？我在回答中也说过同样的话，但我想知道：如果文档的所有内容都加载完毕后，即视频加载完毕后，文档的onload处理程序中的代码会起作用吗，太晚了，无法对视频应用onload处理程序？@nnnnnn：你说得有点对。在window.onload事件中触发代码已经太晚了（对于OP真正想要做的事情来说）。但是对于document.onload事件来说还不算太晚。编辑了我的答案以反映window.onload可能已经太晚的事实。很酷，感谢您的澄清。所有浏览器都是这样吗？（我已经很久没有使用onload处理程序了，我不记得了——我通常使用jQuery的DocumentReady和/或将脚本放在末尾。）不确定。IE上有整个DOMContentLoaded的东西，所以我认为document.onload没有可靠的跨浏览器行为。