深入理解js中的加载事件

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 src="https://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=;

类似地,link元素可以触发load事件,且无兼容性问题。与script类似,在未指定href属性并将link元素添加到文档之前也不会开始下载样式表

类似地,link元素可以触发load事件,且无兼容性问题。与script类似,在未指定href属性并将link元素添加到文档之前也不会开始下载样式表

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); }

beforeunload

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwgjds.html