Javascript学习之路:事件在页面加载和关闭时的执行顺序

2024-01-07 18:05:24

👉前言

在实际项目中,如果我想在打开浏览器页面加载时执行某些任务,比如获取当前页面的全部或部分数据,优先想到的事件是onload,当关闭页面时,我们也常常会使用onunload事件。但是这两个事件却有一定的局限性,如果第一次加载页面时,onload事件一定会执行,而如果页面从缓存中获取,onload事件则无法执行;比如使用onunload事件,关闭页面时,页面是不会保存在缓存中的;又比如,我想在页面加载解析完,但是外部资源(图片,文件,视频,iframe,脚本,样式表等)还在加载中就去执行某些任务又应该怎么办?下面本文将为大家一一阐述资源状态型事件们,希望走过,路过的同行大神们多多指点👏👏。

在这里插入图片描述

今天,我要阐述的资源状态型事件有6个,按照执行先后排序分别是

  • DOMContentLoaded
  • load
  • pageshow
  • beforeunload
  • pagehide
  • unload

👉1. DOMContentLoaded事件

  • 网页下载并解析完成以后,所有外部资源(样式表、脚本、iframe 等等)还没有下载时执行。
  • 这时,页面的dom树已经生成,所以浏览器会在document对象上触发 DOMContentLoaded 事件。
  • 案例
    document.addEventListener('DOMContentLoaded', function (event) {
        console.log('执行任务');
    });
    

👉2. load事件

  • load事件,页面和资源加载成功触发,页面或资源从浏览器缓存获取,则不会执行该事件
  • 案例
    window.addEventListener('load', function(event) {
       console.log('所有资源都加载完成');
     });
    
  • error在页面或资源加载失败时触发
    window.addEventListener('error', function(event) {
     console.log('资源加载失败');
    });
    

👉3. pageshow 事件

  • pageshow事件在页面第一次加载和从缓存中加载时都可以触发。而load事件,DOMContentLoaded事件只有在页面第一次加载时才会执行。因为缓存中的样子通常是load事件的监听函数运行后的样子,所以浏览器的渲染机制认为没必要重复执行,当然初始化的javascript脚本也不会执行。
  • 也可以理解为该事件只在浏览器的history对象发生变化时触发
  • persisted事件对象的属性,返回的数据类型是布尔值,返回false是第一次加载,返回true,是从缓存中加载。
  • 案列
    getList(){
        alert("初始化加载数据")
    }
      window.addEventListener('pageshow',function(e)
         if(e.persisted){ 
             getList()
         }
     })
    

👉4.beforeunload事件

  • beforeunload事件在窗口,文档,各种资源将要卸载时触发,可以用来防止客户端不小心卸载资源。

  • returnValue 对象属性,浏览器就会弹出一个二次确认框,询问客户端是否需要卸载该资源,returnValue如果是非空字符串,那么则为客户端指定的内容,点击取消,资源就不会卸载。

  • 但是需要注意的是,大多数浏览器在对话框中只显示默认文本,无论是否设置returnValue,有的浏览器调用event.preventDefault(),也会弹出对话框。

  • 案例

     window.addEventListener('beforeunload', function (e) {
           var  message = '确认关闭窗口?';
           e.returnValue = message;
       return message;
      })
    
  • 一旦使用了beforeunload事件修改初始状态,浏览器就不会缓存当前网页

👉5.pagehide事件

  • 它与unload事件的区别在于,如果在window对象上定义unload事件的监听函数之后,页面不会保存在缓存中,而使用pagehide,可以控制页面保是否存在缓存中

  • persisted事件属性

    • 设置true,就表示页面要保存在缓存中
    • 设置false,网页不保存在网页中
  • 案例

    window.addEventListener('pagehide', function(event){  
    });
    

👉6.unload事件

  • unload事件在窗口关闭或者document对象将要卸载时触发
  • unload事件触发,文档处于特殊的状态,所有资源依然存在,但是对用户来说,是看不见的,用户交互会全部无效,这个事件也无法取消,即使在监听函数里面抛出错误,也不能停止文档的卸载。
  • 一旦使用了unload事件,浏览器就不会缓存当前网页
  • 案例
    window.addEventListener('unload',function(event){
    	alert('文档将要卸载')
    })
    

文章来源:https://blog.csdn.net/Code_King006/article/details/135385556
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。