首页 > 编程笔记 > JavaScript笔记
阅读:54
JS onload事件:页面完全加载完毕
在 JavaScript 中,onload 事件在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件(如 CSS、JS 文件等)的加载,也就是说,在页面所有内容全部加载之前,任何 DOM 操作都不会发生。为 window 对象绑定 onload 事件的方法有两种。
1) 直接为 window 对象注册页面初始化事件处理函数。
2) 在页面 <body> 标签中定义 onload 事件处理属性。
1) 在 body 元素中通过事件属性的形式回调函数。
2) 通过函数嵌套或闭包函数来实现。
1) 直接为 window 对象注册页面初始化事件处理函数。
window.onload = f; function f() { alert("页面加载完毕"); }
2) 在页面 <body> 标签中定义 onload 事件处理属性。
<body onload="f()"> <script> function f() { alert("页面加载完毕"); } </script>
示例1
如果同时使用上面两种方法定义页面初始化事件,它们并不会发生冲突,也不会发生两次触发事件。<body onload="f()"> <script> window.onload = f; function f() { alert("页面加载完毕"); } </script> </body>原来 JavaScript 解释器在编译时,如果发现同时使用两种方法定义 onload 事件,会使用 window 对象注册的事件处理函数覆盖掉 body 元素定义的页面初始化事件属性。
示例2
在下面示例中,函数 f2() 被调用,而函数 f1() 就被覆盖掉。<body onload="f1()"> <script> window.onload = f2; function f1 () { alert('<body onload="f1()">'); } function f2 () { alert('window.onload = f2;'); } </script> </body>在实际开发中,onload 事件经常需要调用附带参数的函数,但是 onload 事件不能够直接调用函数,要解决这个问题,有以下两种方法。
1) 在 body 元素中通过事件属性的形式回调函数。
<body onload="f('Hi')"> <script> function f (a) { alert(a); } </script> </body>
2) 通过函数嵌套或闭包函数来实现。
window.onload = function () { //事件处理函数 f("Hi"); //调用函数 } functioin f(a) { //被处理函数 alert(a); }也可以采用闭包函数形式,这样在注册事件时,虽然调用的是函数,但是其返回值依然是一个函数,不会引发语法错误。
window.onload = f("Hi"); function f(a) { return function () { alert(a); } }通过这种方法,可以实现在 onload 事件上绑定更多的响应回调函数。
window.onload = function () { f1(); //绑定响应函数1 f2(); //绑定响应函数2 } function f1() { alert("f1()"); } function f2() { alert("f2()"); }但是,如果分别绑定 onload 事件处理函数,则会相互覆盖,最终只能够有一个绑定响应函数被调用。
window.onload = f1(); function f1(){ alert("f1()"); } function f2() { alert("f2()"); }也可以通过事件注册的方式来实现。
if (window.addEventListener) { //兼容DOM标准 window.addEventListener ("load", f1, false); //为load添加事件处理函数 window.addEventListener ("load", f2,false); //为load添加事件处理函数 } else { 、、兼容IE事件模型 window.attachEvent ("onload", f1); window.attachEvent ("onload", f2); }
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频