事件对象-加载事件

load

load事件应该是加载事件最常用的一个，它表示当页面完全加载完成后（包括图片、JS、CSS等外部资源）触发的事件

load事件不仅发生在document、window对象上，外部资源的加载也能触发load事件（如图片、JS、CSS、音频、视频、Ajax请求等等）

注意： 如果页面从浏览器缓存加载，不会触发load事件

如果是为图像指定load事件，要在指定图像的src属性之前先指定事件，因为图像是从设置src属性之后开始下载。

如果是js资源，只有在设置了script元素的src属性并将该元素添加到文档后，才会开始下载javascript文件。CSS也是同样

var img = new Image();
img.onload = function() {
  document.body.appendChild(img);
}
img.src = 'https://cdn.86886.wang/blog/1520049901259.jpg'

// 特别说明：在chrome80版本下测试，即使在onload之前设置src也是可以的

var script = document.createElement('script');
script.src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js";
document.body.appendChild(script);
script.onload = function(){
  console.log('loaded')
}

var link = document.createElement('link');
link.rel="stylesheet";
link.href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap-grid.min.css";
document.getElementsByTagName('head')[0].appendChild(link);
link.onload = function(){
  console.log('loaded')
}

error

error事件在资源加载失败时触发，所有可以触发load事件的元素同样可以触发error事件。任何没有try-catch处理的错误都会触发window对象的error事件

error事件可以接收三个参数：错误消息、错误所在的URL和行号

window.onerror = function(message,url,line){
  console.log(message)
}

浏览器是否显示标准的错误消息，取决于onerror的返回值。如果返回值为false，则在控制台中显示错误消息；如果返回值为true，则不显示

//控制台显示错误消息
window.onerror = function(message,url,line){
  console.log(message);
  return false;
}

//控制台不显示错误消息
window.onerror = function(message,url,line){
  console.log(message);
  return true;
}

图片也支持error事件，发生error事件时，图像下载过程已经结束，也就是不能再重新下载了。但是，可以在error事件中，重新设置图像的src属性，指向备用图像的地址

var image = new Image();
image.onload = function() {
  document.body.appendChild(image);
}
image.onerror = function(){
  image.src = 'default.png';
}
image.src = 'a.png';

unload

unload事件在文档被完全卸载后触发。刷新页面时，也会触发该事件

window.onunload = function(e) {
  console.log('unload')
}

unload事件通常用于移除load事件中添加的事件处理程序，因为在卸载页面时，内存中存留的不用的事件处理程序不会被自动被移除，这就造成了内存浪费，所以最好的做法是在页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序

beforeunload

beforeunload事件在关闭网页或刷新网页时触发，它一般地用来防止用户不小心关闭网页

beforeunload事件需要满足以下两个条件之一才会生效：

事件处理程序返回一个真值
事件对象event.returnValue返回一个真值

如果上面两个条件同时满足，则以第一个条件为准

window.onbeforeunload = function(e){
  // IE浏览器显示指定文本，其他浏览器显示默认文本
  e.returnValue = '确定要离开吗？';    
}

DOMContentLoaded

load事件需要在页面的所有资源都加载完成后才会触发，但是有时候希望DOM树加载完成后就能执行处理程序，这样用户能尽早地与页面进行交互。DOMContentLoaded事件可以在形成完整的DOM树之后立即触发，无需等待其他外部资源的加载

DOMContentLoaded事件的监听函数应该放在所有脚本的最前面，这样即使脚本发生堵塞，也不会推迟DOMContentLoaded事件的执行

window.addEventListener('DOMContentLoaded',function(e){
  console.log(1);
})

readystatechange

readystatechange事件可以发生在Document对象和XMLHttpRequest对象上，它们会在readyState属性发生变化时触发，支持readystatechange事件的每个对象都有一个readyState属性，可能包含下列5个值中的一个

uninitialized(未初始化)：对象存在但尚未初始化 
loading(正在加载)：对象正在加载数据
loaded(加载完毕)：对象加载数据完成
interactive(交互)：可以操作对象了，但还没有完全加载
complete(完成)：对象已经加载完毕

并非所有对象都会经历上面列出的5种状态，如果某个阶段不适合这个对象，则该对象可能跳过该阶段。另外，交互阶段和完成阶段的先后顺序是不定的，取决于页面资源的多少。如果readystatechange事件与load事件一起使用，同样无法预测两个事件的触发顺序，取决于页面资源的多少

对于document对象而言，值为interactive的readyState会在与DOMContentLoaded大致相同的时刻触发readystatechange事件，此时，DOM树已经加载完毕

document.onreadystatechange = function(e){
  if(document.readyState == 'uninitialized'){
    console.log('uninitialized');
  }
  if(document.readyState == 'loading'){
    console.log('loading');
  }
  if(document.readyState == 'loaded'){
    console.log('loaded');
  }
  if(document.readyState == 'interactive'){
    console.log('interactive');
  }
  if(document.readyState == 'complete'){
    console.log('complete');
  }    
}

posted @ 2021-09-30 13:33 wmui 阅读(340) 评论(0) 编辑收藏举报

刷新页面返回顶部

wmui