Ajax深刻理解DOM事件类多样第六篇——加载事件

前面的言辞

  提到加载事件,可能想到了window.onload,但实质上,加载事件是同等十分接近事件,本文将详细介绍加载事件

 

load

  load事件是最最常用之一个轩然大波,当页面完全加载后(包括有图像、javascript文件、CSS文件等外部资源),就会见触发window上之load事件

  [注意]IE8-浏览器不见面吗该事件设置srcElement属性,而别浏览器的target属性指向document

window.onload = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    //IE8-浏览器返回null,其他浏览器返回document
    console.log(target);
}

  load事件不仅出在document对象,还闹在各种外部资源方面。浏览网页就是一个加载各种资源的历程,图像(image)、样式表(style
sheet)、脚本(script)、视频(video)、音频(audio)、Ajax请求(XMLHttpRequest)等等。这些资源同document对象、window对象、XMLHttpRequestUpload对象,都见面触发load事件

  [注意]假如页面从浏览器缓存加载,并无见面触发load事件

  图像和框架iframe呢可触发load事件

  [注意]假使于指定图像的src属性之前先指定事件,图像是自装src属性之后开下载

var img = new Image();
img.onload = function(){
    document.body.appendChild(img);
}
img.src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg";

<iframe id="test" src="http://cnblogs.com" frameborder="0"></iframe>
<script>
test.onload = function(){
    console.log(666);
}
</script>

  script元素否可以触发load事件,以便开发人员确定动态加载的javascript文件是否加载了。与图像不同,只有当装置了script元素的src属性并将欠因素添加到文档后,才会初步产载javascript文件。换句话说,指定src属性和指定事件处理程序的先后顺序不重要

  [注意]IE8-浏览器不支持该用法

var script = document.createElement('script');
script.onload = function(){
    console.log(666);
}
document.body.appendChild(script);
script.src="http://files.cnblogs.com/files/xiaohuochai/excanvas.js";

  类似地,link元素可以触发load事件,且无兼容性问题。与script类似,在匪指定href属性并以link元素添加到文档之前为无见面初步下载样式表

var link = document.createElement('link');
link.rel="stylesheet";
link.onload = function(){
    console.log(666);
}
document.getElementsByTagName('head')[0].appendChild(link);
link.href="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/style.css";

 

error

  load事件于加载成功时接触,而error事件及的正相反,在加载失败时接触。凡是足以触发load事件之因素,同样好触发error事件

  任何没有经try-catch处理的谬误还见面触发window对象的error事件

  error事件可以接三独参数:错误信息、错误所当的URL和行号。多数情况下,只出错信息发出因此,因为URL只是于出了文档的职位,而行号所依赖的代码行既可能来嵌入的javascript代码,也可能来自外部的文书

  要指定onerror事件处理程序,可以用DOM0层技术,也足以以DOM2级事件之规范格式

//DOM0级
window.onerror = function(message,url,line){
    alert(message);
}
//DOM2级
window.addEventListener("error",function(message,url,line){
    alert(message);
});

  浏览器是否出示专业的不当信息,取决于onerror的归来值。如果回到回值为false,则于控制台中显得错误信息;如果回去回值为true,则无显得

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

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

  这个事件处理程序是避免浏览器报告错误的末段一道防线。理想状态下,只要可能就是非应利用她。只要能够方便地应用try-catch语句,就无见面来荒唐付出浏览器,也尽管不见面触发error事件

  图像为支撑error事件。只要图像的src特性中之URL不克回可以被认别的图像格式,就会触发error事件。此时的error事件仍DOM格式,会回一个缘图像也目标的event对象

  发生error事件时,图像下载过程都完结,也就是是匪能够重重下载了。但是,可以当error事件备受,重新安装图像的src属性,指向备用图像的地址

var image = new Image();
document.body.appendChild(image);
image.onerror = function(e){
    image.src = 'smileBackup.gif';
}
image.src = 'smilex.gif';

 

abort

  元素加载中止时,(如加载过程被按照下ESC键,停止加载),触发该事件,常用来图片加载

  [注意]才生IE浏览器支持

var image = new Image();
image.onabort = function(){
    console.log(111);
}
document.body.appendChild(image);
image.src = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg';

 

unload

  与load事件对应的是unload事件,该事件于文档被完全卸载后点。刷新页面时,也会硌发拖欠事件

  chrome/firefox/safari浏览器会阻止alert等对话框,IE浏览器会阻止console.log()等控制台显示

window.onunload = function(e){
    //chrome报错,firefox静默失败,IE弹出666
    alert(666);
}

window.onunload = function(e){
    //chrome和firefox控制台显示666,IE静默失败
    console.log(666);
}

  以卸载页面的下,会造成“空事件处理程序”的来。“空事件处理程序”是依内存中存留的不合时宜不用的事件处理程序,它们是致Web应用程序内存和特性问题之显要因。一般的话,最好的做法是当页面卸载之前,先通过onunload事件处理程序移除所有事件处理程序。因此,只要是经过onload事件处理程序添加的东西,最后还应该通过onunload事件处理程序用其移除

 

beforeunload

  beforeunload事件在关闭网页还是刷新网页时接触。它一般地用来防护用户不小心关闭网页

  如果要是于beforeunload事件生效,必须满足以下简单个规格之一:1、事件处理程序返回一个真值;2、事件目标event.returnValue返回一个真值。如果简单只极还要满足,则因为率先独规范吧按照

  chrome/safari/firefox以对话框中不亮指定文本,只展示默认文本。而IE浏览器会当对话框中显示返回值或returnValue值

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

 

DOMContentLoaded

  window的onload事件会在页面被的整都加载了时接触,但此过程也许会见因为如果加载的表资源过多设颇费周折。而DOMContentLoaded事件则在多变一体化的DOM树之后就见面硌,而非理会图像、javascript文件、CSS文件或者外资源是否下载了。与load事件不同,DOMContentLoaded支持在页面下载的最初添加事件处理程序,这为便代表用户能够及早地与页面进行互动

  [注意]网页的javascript脚论是联合执行的,所以定义DOMContentLoaded事件之监听函数,应该置身有脚本的无限前面。否则脚本一旦闹堵塞,将推触发DOMContentLoaded事件

  要处理DOMContentLoaded事件,可以吗document或window添加相应的事件处理程序,尽管这波会打肿脸充胖子泡到window,但其的靶子其实是document

  [注意]IE8-浏览器不支持该事件

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

  对于无支持该事件之浏览器如IE8-浏览器,可以在页面加载中设置一个日啊0毫秒的超时调用,且务必作为页面的率先独过调用

setTimeout(function(){
    console.log(1);    
},0)

 

readystatechange

  readystatechange事件发生在Document对象与XMLHttpRequest对象,它们的readyState属性发生变化时触发

  这个波之目的是提供与文档或因素的加载状态有关的音。支持readystatechange事件的每个对象还生一个readyState属性,可能含有下列5个价值备受的一个

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

  这些状态看起非常直观,但并非所有目标还见面经历readyState的即时几乎独号。换句话说,如果某个阶段不适用某个对象,则该对象了可能过了该等;并没规定谁阶段适用于哪个目标。显然,这象征readystatechange事件经常会面少于4糟,而readyState属性的价值吗非总是连的

  对于document而言,值为”interactive”的readyState会在同DOMContentLoaded大致相同的天天触发readystatechange事件。此时,DOM树已经加载了,可以高枕无忧地操作其了,因此即使会见进相互(interactive)阶段。但又,图像以及其余外部文件不必然可用

//'interactive'  'complete'
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');
    }    
}

  于与load事件并以时,无法预计少个事件触发的先后顺序。在包含较多或比较生之标资源的页面被,会当load事件触发之前先行上相互阶段;而以蕴藏较少或者比小的表资源的页面中,则很难说readystatechange事件会生出在load事件前

  让问题易得重复复杂的凡,交互阶段或者会见早让为可能会见晚于完成等出现,无法保证顺序。在含蓄较多外部资源的页面被,交互阶段还发生或早于完成等出现;而当页面被蕴含较少外部资源的情景下,完成等先于交互阶段出现的可能还甚。因此,为了尽量快到先机,有必不可少同时检测互与姣好等

document.onreadystatechange = function(){
    if(document.readyState == 'interactive' || document.readyState == 'complete'){
        console.log('loaded');
        document.onreadystatechange = null;
    }
}

  对于地方的代码来说,当readystatechange事件触发时,会检测document.readyState的价值,看眼前是不是已进来相互阶段要成就等。如果是,则移除相应的事件处理程序以免在任何阶段又实践

  另外,IE10-浏览器支持为script元素和link元素触发readystatechange事件,用来规定外部的javascript或css文件是否早已加载成功

var script  = document.createElement('script');
script.onreadystatechange = function(){
    if( script.readyState == 'loaded'  || script.readyState == 'complete'){
        console.log('loaded');
        script.onreadystatechange = null;
    }
}
script.src="js/digit.js";
document.body.appendChild(script);

var link  = document.createElement('link');
link.rel="stylesheet";
link.onreadystatechange = function(){
    if( link.readyState == 'loaded'  || link.readyState == 'complete'){
        console.log('loaded');
        link.onreadystatechange = null;
    }
}
link.href="test.css";
document.getElementsByTagName('body')[0].appendChild(link);

相关文章