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事件可以选择多少个参数:错误音信、错误所在的U奥迪Q3L和行号。多数状态下,唯有不当新闻有用,因为ULacrosseL只是付出了文书档案的岗位,而行号所指的代码行既可能来自嵌入的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特性中的U瑞虎L无法回去能够被识其余图像格式,就会触发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键,结束加载),触发该事件,常用来图片加载

  [Ajax,注意]只有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事件生效,必须知足以下八个标准之一:一 、事件处理程序再次回到叁个真值;贰 、事件指标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属性,大概包涵下列五个值中的1个

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

  这几个意况看起来很直观,但决不全部指标都会经历readyState的那多少个级次。换句话说,假若有个别阶段不适用某些对象,则该指标完全大概跳过该阶段;并没有规定哪个阶段适用于哪个指标。分明,那象征readystatechange事件平时会简单伍遍,而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);

相关文章