概述
1. onbeforeunload
在即将离开当前页面（刷新或关闭）时触
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。
但你可以自定义一些消息提示与标准信息一起显示在对话框。
注意
- 如果你没有在 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。
- 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。
提示
不支持冒泡
支持的HTML标签
<body>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | 9.0 | true | true | 15.0 |
document.body.onbeforeunload = function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
document.body.onbeforeunload = function(){
return '不要关闭奴家';
}
</script>
</html>
2. onerror
加载外部文件（文档或图像）发生错误时触发
提示
不支持冒泡
支持的HTML标签
<img>, <input type="image">, <object>, <script>, <style>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | 9.0 | true | true | true |
ElementObject.onerror = function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
function scriptError(){
console.log(this.src);
}
</script>
<script src='error/01' onerror='scriptError.call(this)'></script>
<script src='error/02' onerror='scriptError.call(this)'></script>
<script src='error/03' onerror='scriptError.call(this)'></script>
</html>
3. onhashchange
当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发
锚部分的实例：指定当前 URL 为
http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。
你可以使用以下方式调用事件:
* 通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。
* 使用不同书签导航到当前页面（使用”后退” 或”前进”按钮）
* 点击链接跳转到书签锚
提示
支持冒泡
支持的HTML标签
<body>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| 5.0 | 8.0 | 3.6 | 5.0 | 10.6 |
document.body.onhashchange = function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
location.hash = "023";
document.body.onhashchange = function(){
alert("你又在做坏事！");
}
</script>
</html>
4. onload
在页面或图像加载完成后立即发生
通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
支持的HTML标签
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | true | true | true | true |
window.onload=function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
window.onload = function(){
console.log(document);
}
</script>
</html>
5. onpageshow
用户浏览网页时触发
onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false (查看以下 “更多实例” )。
提示
不支持冒泡
支持的HTML标签
<body>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | 11.0 | true | 5.0 | true |
document.body.onpageshow=function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
document.body.onpageshow = function(){
console.log(document);
}
</script>
</html>
6. onpagehide
用户离开网页时触发
离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。.
onpagehide 事件有时可以替代 onunload 事件，但 onunload 事件触发后无法缓存页面。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。
提示
不支持冒泡
支持的HTML标签
<body>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | 11.0 | true | 5.0 | true |
document.body.onpagehide=function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
document.body.onpagehide = function(){
console.log(document);
}
</script>
</html>
7. onresize
窗口或框架被调整大小时发生
支持的HTML标签
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | true | true | true | true |
window.onresize=function || ElementObject.onresize = function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body>
</body>
<script>
window.onresize = function(e){
e = e || window.event;
console.log(this.innerWidth);
}
</script>
</html>
8. onscroll
元素滚动条在滚动时触发
提示
使用 CSS overflow 样式属性来创建元素的滚动条。
支持的HTML标签
<address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> - <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
浏览器支持
| IE | firefox | safari | opera | |
|---|---|---|---|---|
| true | true | true | true | true |
window.onscroll=function || ElementObject.onscroll = function
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>zsh</title>
</head>
<body style='height:3000px;'>
</body>
<script>
window.onscroll = function(e){
e = e || window.event;
console.log(this.innerWidth);
}
</script>
</html>
文档内容出自 W3cSchool和菜鸟教程， 如需查看更详细的有关内容 请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/
最后
以上就是隐形小鸽子为你收集整理的Event事件对象之框架或Object的全部内容，希望文章能够帮你解决Event事件对象之框架或Object所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复