事件类型—UI事件

xiaoxiao2022-07-06 214

一、概述

二、load事件

三、error事件

四、abort事件

五、unload事件

六、beforeunload事件

七、DOMContentLoaded事件

八、resize事件

九、scroll事件

一、概述

UI事件又称用户界面事件，是指那些不与用户行为直接相关的事件。常见的UI事件有load事件、unload事件、abort事件、error事件、resize事件、scroll事件等。

二、load事件

该事件在指定资源及其依赖资源已成功加载时触发，适用于window对象、内联框架、图像、样式表、脚本、视频、音频、ajax请求等。如果资源从缓存中加载，不会触发load事件。

window对象

当页面完全加载后（包括图像、JS文件、CSS文件等所有外部资源）会触发window上的load事件。JS中绑定load事件处理程序等同于直接给body标签添加onload特性（window上面的任何事件都可以在body标签中通过相应特性来指定）。

window.onload = function(){ } <body onload="fn()"></body> <script> function fn(){ } </script>

iframe框架

img元素

<img src="url" onload="alert('image loaded')"> <script> var img = new Image(); img.onload = function(){ document.body.appendChild(img); } img.src="https://hbimg.huabanimg.com" + "/0b91b92f8fb1d93fdfcfcbafa4eab115365118236b929-jj5AiK_fw658"; //图像从设置src属性之后开始加载, 要在加载之前设置load事件才有效 //所以要在设置图像的src属性之前先指定load事件 </script>

script元素

ie8及以下版本的浏览器不支持script元素上的load事件。

var script = document.createElement('script'); script.onload = function(){ } document.body.appendChild(script); script.src="http://files.cnblogs.com/files/xiaohuochai/excanvas.js"; //设置src属性并将script元素添加到文档后才开始下载JS文件

link元素

var link = document.createElement('link'); link.rel="stylesheet"; link.onload = function(){ } document.getElementsByTagName('head')[0].appendChild(link); link.href="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/style.css"; //设置href属性并将link元素添加到文档后才开始下载样式表。

三、error事件

该事件在指定资源及其依赖资源加载失败时触发。凡是可以触发load事件的元素，同样可以触发error事件。

window对象上的error事件接收三个参数，其一错误信息，其二错误所在url，其三错误所在行号。任何没有使用try-catch处理的错误都会触发window对象的error事件。加载error事件之前遇到的错误不会被该事件捕获。该事件的返回值决定浏览器是否显示标准错误信息，返回值为false，在控制台中显示错误信息，返回值为true，则不显示。

<body onerror="fn()"></body> <script> function fn(){ } </script> window.onerror = function(msg, url, line){ console.log(msg); } <script> window.onerror = function(info,url,ha){ console.log(info); }; var str = null.s; //错误会触发error事件 </script> <script> var str = null.s; //错误不会触发error事件 window.onerror = function(info,url,ha){ console.log(info); }; </script> <script> window.onerror = function(info,url,ha){ console.log(info); return true; }; var str = null.s; //错误信息不在控制台打印 </script> <script> window.onerror = function(info,url,ha){ console.log(info); return false; }; var str = null.s; //错误信息在控制台打印 </script>

图像也支持error事件，src属性中的url返回的图像格式不能被识别时就会触发该事件。该事件接收一个参数，表示以图像为目标的event对象。发生error事件时，图像下载过程结束，可以在该事件中重新设置图像的src属性，加载备用图像。

四、abort事件

该事件在元素加载中止时触发，如加载过程中按下esc键停止加载。常用于图片加载。只有ie浏览器支持该事件。

五、unload事件

卸载事件。页面卸载时触发该事件（如页面关闭、刷新）。chrome/firefox/safari浏览器会阻止alert等对话框，ie浏览器会阻止console.log()等控制台显示。该事件经常用于清除引用，避免内存泄漏。页面卸载时会导致空事件处理程序发生。空事件处理程序是指内存中存留的过时不用的事件处理程序，它们是造成web应用程序内存和性能问题的主要原因。

六、beforeunload事件

该事件在关闭或刷新网页之前触发，一般用来防止用户不小心关闭网页。如果将事件对象的returnValue属性值设置为一个字符串，就会出现一个对话框，用于二次确认用户是否离开该页面。ie浏览器在对话框中显示自定义的returnValue属性值，其他浏览器显示默认信息。如果未设置returnValue属性值，该事件依旧会触发，以静默方式处理事件，不会弹出对话框。

如果进入当前页面后用户与页面没有任何交互，直接关闭或刷新网页时不会有弹框提示。一定要与页面进行交互之后才能在页面关闭或刷新时弹出确认离开的对话框。没有页面交互，也会触发该事件，但不会弹出确认离开的对话框。

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

七、DOMContentLoaded事件

页面加载时，只要dom节点树加载完成即页面解析完成后就会触发该事件，不关心图像、JS文件、样式表等外部文件是否加载完成。JS脚本是自上而下同步执行的，所以该事件的侦听器要放在脚本的最前面，否则一旦该事件前的脚本发生阻塞，会推迟触发该事件。ie8及以下版本的浏览器不支持该事件。该事件侦听器的绑定元素可以是document或window，最终会冒泡到window。该事件只能绑定dom2级事件处理程序。

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

ie8及以下版本的浏览器中，可以设置一个时间为0毫秒的超时调用来代替该事件，且必须作为页面的第一个超时调用。

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

八、resize事件

该事件在浏览器窗口大小被改变时触发。所有主流浏览器都支持该事件。该事件是window对象的成员，因此可以通过JS或body标签上的onresize特性来指定事件处理程序。

<body onresize="console.log(1);"></body> <script> window.onresize = function(){ console.log(1); } </script>

九、scroll事件

滚动条拖动事件。该事件在拖动滚动条时触发。window对象或dom元素都可以设置该事件。所有主流浏览器都支持该事件。

<div style="height:1000px"> <div id="div" style="position:fixed;top:10px;"></div> </div> <script> window.onscroll = function(){ var distance = document.documentElement.scrollTop + document.body.scrollTop; div.innerHTML = 'scrollTop:' + distance; } </script>

最新回复(0)