什么是JavaScript中的Window onload事件?

659 阅读3分钟

随着网络开发的新进展,JavaScript甚至在不同的框架中不断发展,这让开发者的生活变得更加轻松。谈到它的使用,到现在为止,许多著名的网站都是基于JavaScript建立的,这说明这种语言是多么的可靠。

JavaScript有一个窗口的onload事件,在网页被加载时启动某些功能。该onload事件也被用来验证访问者的浏览器类型和版本。此外,还可通过onload属性检查cookies。

当对象在HTML中被加载时,onload属性就会触发。这是为了在相关元素加载时启动脚本。用更简单的话来说,我们可以说,只要网页启动成功,就会触发窗口的onload事件。

Onload事件是用来在页面的实质内容(包括CSS文件、图像和脚本)被完全触发后运行脚本的。然而,你并不总是需要一个标签。它可以与其他Html元素一起使用。

download.onload在图像和外部内容之前启动,正好在window.onload之前触发。而window.onload则在页面完全加载后启动,包括CSS、脚本文件、图像等。

如果你想在JavaScript中操作加载事件,那么你需要通过addEventListener()方法注册事件监听器,如下例所示。

window.addEventListener('load', (event) =>{

    console.log(Page Loaded);

});

你还可以通过窗口对象的属性即onload来处理加载事件。下面的例子展示了如何使用onload属性。

window.onload = (event) =>{

    console.log('Page Loaded');

};

在HTML标题部分设置Window.onload事件

首先,我们将介绍一个window.onload事件的简单例子。在这个例子中,只要有页面加载,我们就会简单地显示一条警告信息。

语法

window.onload= functionName();

例子

<html>

<head>

<script type="text/javascript">

function js_onload_code (){

alert(" Hello, you are learning onload event in JavaScript");

}

window.onload= js_onload_code ();

</script>

</head>

<body >

</body>

</html>

输出

在HTML的body部分的Onload事件

内容可以显示在HTML的body部分。每当网页被加载时,当时发生的事件被命名为onload事件。我们可以在body部分使用onload事件,这样就可以执行脚本。

语法

<body onload="functionname()";>

例子

如果你想在body部分使用一个onload事件,那么请执行以下代码。

<html>

<head>

<script type="text/javascript">

function js_onload_code (){

alert(" Hello, you are learning onload event in JavaScript");

}

</script>

</head>

<body onLoad="js_onload_code ()";>

</body>

</html>

输出

在HTML正文部分的窗口加载事件

onload窗口的对象代表浏览器的窗口。每当所有的操作都被完全加载时,那么onload属性就会处理加载事件。我们想要执行的函数被分配给了onload属性的处理函数。每当网页被加载时,该函数就会被执行。我们在下文中为您提供了一个例子。

语法

window.onload = function functionName() {

    // write function here

}

例子

<!DOCTYPE html>

<html>

<head>

    <title>

         Window Onload Event

    </title>

</head>

<body>

  <b>What is window onload event in JavaScript?</b>

  <p>Script Executed. Now you can check your console to see the             output. </p>

  <script>

    window.onload = function your_function_name() {

    console.log('Hey, you are learning window onload event in JavaScript. Script will be loaded.');

        }

   </script>

</body>

</html>

输出

控制台的输出

如果你想看控制台的输出,那么你必须按快捷键,即CTRL+SHIFT+I,打开devTool。

总结

我们已经了解了什么是window.onload()事件,还学习了onload事件的语法。我们简要讨论了如何在JavaScript中编写onload事件的几种方法以及一个例子。简而言之,window.onload()事件是在网页加载完毕后触发的。我们还看到,onload事件对于设置浏览器的版本非常有用,也可用于观察网页的cookies。