javascript事件基础--页面事件(loade、DOMContentLoaded 、unload)

最新推荐文章于 2022-07-07 21:40:36 发布

wenmin1987

最新推荐文章于 2022-07-07 21:40:36 发布

阅读量999

点赞数

分类专栏： JavaScript 文章标签：页面加载load DOMContentLoaded事件

本文链接：https://blog.csdn.net/wenmin1987/article/details/88807817

版权

JavaScript 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

页面事件包括加载和卸载，即用户访问页面和离开关闭页面

load事件在页面完全加载完毕触发，该事件包含所有的图形图像、外部文件（css javascript文件等），在这些之前任何DOM不会操作

DOMContentLoaded事件，作为DOM标准事件，不需要图像等全部加载，只需要DOM加载完毕即执行，比load先触发，目前Mozilla和Opera支持，IE和Safari浏览器不支持

1.直接使用window对象注册页面初始化事件处理函数

   <script>

window.οnlοad=f;
function f(){
alert("页面加载完毕");
}
   </script>

2.在<body >中定义onload的事件

<body οnlοad="f()">
       <script>
           function f(){
               alert("页面加载完毕");
           }
       </script>
   </body>

实际开发一般会传参

<body οnlοad="f("hello")">
       <script>
           function f(a){
               alert(a);
           }
       </script>
   </body>

<script>

//页面加载执行多个处理函数

window.οnlοad=function(){

f1("Hello");

   f2("World");

}

function f1(a){

alert(a)

}

function f2(b){

alert(b)

}

</script>

兼容IE

<script>
           if(window.addEventListener){
               window.addEventListener("load",f1,false);
               window.addEventListener("load",f2,false);
           }else{
               window.attachEvent("onload",f1);
               window.attachEvent("onload",f2);
           }
           function f1(){alert("页面加载完成，处理f1")}
           function f2(){alert("页面加载完成，处理f2")}
       </script>

二、DOMContentLoaded事件

<script>
           if(window.addEventListener){
               window.addEventListener("load",f1,false);
               window.addEventListener("load",f2,false);
           }else{
               window.attachEvent("onload",f1);
               window.attachEvent("onload",f2);
           }
           function f1(){alert("页面加载完成，处理f1")}
           function f2(){alert("页面加载完成，处理f2")}
           if(window.addEventListener){
               window.addEventListener("DOMContentLoaded",f,false);
           }
           function f(){alert("我提前执行了")}
       </script>

<body>

<img src="../img/orientationa.png"/>

</body>

先弹出我提前执行了，而当图片加载完毕只有才会弹出load事件处理函数

兼容IE：写入脚本标签（未调通）

if(window.ActiveXObject){
   document.write("<script id=ie_onload defer src=javasript:void(0)><\/script>");//写入脚本标签
   document.getElementById("ie_onload").onreadystatechange=function(){//Script的onreadystatechange方法
       //判断脚本标签的状态
       if(this.readyState=="complete"){
           //若果状态为完成，则说明文档结构加载已完毕
           this.onreadystatechange=null;//调用预先执行的回调函数
           f();
       }
   }
}

兼容Safari，使用定时器周期性地检测Document对象的readyState属性，如果加载完成，则清除计时器，完成回调（未调通）

if(/WebKit/i.test(navigator.userAgent)){//兼容Safari
   var _timer=setInterval(function(){//定义时间检测器
       if(/loaded|complete/.test(document.readyState)){//如果当前状态显示完成（文档加载完毕）
           clearInterval(_timer); //清除时间监测器
           f(); //调用预先执行的回调函数
       }

   },1000)
}

页面卸载：（未调通）

window.onunload=f;

function f(){

alert("999")

}

window.οnbefοreunlοad=function(e){//关闭页面前提示信息

return "你的数据还没保存呢"； //没有返回值，系统不弹框

}

wenmin1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件基础--页面事件(loade、DOMContentLoaded 、unload)

页面事件包括加载和卸载，即用户访问页面和离开关闭页面load事件在页面完全加载完毕触发，该事件包含所有的图形图像、外部文件（css javascript文件等），在这些之前任何DOM不会操作DOMContentLoaded事件，作为DOM标准事件，不需要图像等全部加载，只需要DOM加载完毕即执行，比load先触发，目前Mozilla和Opera支持，IE和Safari浏览器不支持...
复制链接

扫一扫