1. onload事件
1.1. onload事件会在页面或图像加载完成后立即发生。
1.2. onload通常用于<body>元素, 在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
1.3. 语法
1.3.1. 在html中:
<body onload="SomeJavaScriptCode">
1.3.2. 在JavaScript中:
window.onload=function(){SomeJavaScriptCode};
1.4. 以下html标签支持onload:
<body>, <img>, <frame>, <frameset>, <iframe>, <input type="image">, <link>, <script>, <style>
2. onbeforeunload事件
2.1. onbeforeunload事件在即将离开当前页面(刷新、关闭或页面跳转)时触发。
2.2. 该事件可用于清空页面数据(注册的事件、Cookies、localStorage存储的数据等), 还有一个场景就是计算用户使用网站的时间。
2.3. 语法
2.3.1. 在html中:
<element onbeforeunload="myScript">
2.3.2. 在JavaScript中:
object.onbeforeunload=function(){myScript};
2.4. 以下html标签支持onbeforeunload:
<body>
3. onunload事件
3.1. onunload事件在用户退出页面时发生。
3.2. 该事件可用于清空页面数据(注册的事件、Cookies、localStorage存储的数据等), 还有一个场景就是计算用户使用网站的时间。
3.3. 语法
3.3.1. 在html中:
<body onunload="SomeJavaScriptCode">
3.3.2. 在JavaScript中:
window.onunload=function(){SomeJavaScriptCode};
3.4. 以下html标签支持onunload:
<body>, <frameset>
4. 例子
4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onload、onbeforeunload和onunload事件</title>
</head>
<body>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a><br /><br />
<button onclick="saveBeforeunloadData()">存储一下onbeforeunload事件需要清空的数据</button>
<button onclick="beforeunloadData()">显示一下onbeforeunload事件需要清空的数据</button><br /><br />
<button onclick="saveUnloadData()">存储一下onunload事件需要清空的数据</button>
<button onclick="unloadData()">显示一下onunload事件需要清空的数据</button>
<p id="myP"></p>
<img src="button.png" onload="picLoaded()" />
<script type="text/javascript">
var myP = document.getElementById('myP');
document.body.onload = function(e){
myP.innerHTML += '文档加载完成<br />';
};
function picLoaded(){
myP.innerHTML += '图片加载完成<br />';
}
function saveBeforeunloadData(){
localStorage.setItem("onbeforeunload", "我是onbeforeunload事件需要清空的数据");
}
function saveUnloadData(){
localStorage.setItem("onunload", "我是onunload事件需要清空的数据");
}
function beforeunloadData(){
alert(localStorage.getItem("onbeforeunload"));
}
function unloadData(){
alert(localStorage.getItem("onunload"));
}
// 所有的浏览器都支持onbeforeunload和onunload事件
document.body.onbeforeunload = function(e){
localStorage.setItem("onbeforeunload", null);
};
document.body.onunload = function(e){
localStorage.setItem("onunload", null);
};
</script>
</body>
</html>
4.2. 效果图
5. onresize事件
5.1. onresize事件会在窗口或框架被调整大小时发生。
5.2. 语法
5.2.1. html中:
<element onresize="SomeJavaScriptCode">
5.2.2. JavaScript中:
window.onresize=function(){SomeJavaScriptCode};
5.3. 例子
5.3.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onresize事件</title>
</head>
<body>
<div id="myDiv" style="width: 300px; height: 100px; background: red; position: absolute;"></div>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
myDiv.style.left = (window.innerWidth / 2 - 150) + "px";
document.body.onresize = function(e){
myDiv.style.left = (window.innerWidth / 2 - 150) + "px";
};
</script>
</body>
</html>
5.3.2. 效果图
6. onscroll事件
6.1. onscroll事件在元素滚动条在滚动时触发。
6.2. 语法
6.2.1. html中:
<element onscroll="myScript">
6.2.2. JavaScript中:
object.onscroll=function(){myScript};
6.3. 例子
6.3.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onscroll事件</title>
</head>
<body>
<div id="myDiv" style="width: 300px; height: 200px; border: solid 1px; overflow: scroll;">
<h2>onscroll事件</h2>
<p>onscroll事件在元素滚动条在滚动时触发。<p>
<h3>语法</h3>
<h4>html中:</h4>
<p><element onscroll="myScript"><p>
<h4>JavaScript中:</h4>
<p>object.onscroll=function(){myScript};<p>
</div>
<p id="myP">结果:</p>
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
var myP = document.getElementById("myP");
myDiv.onscroll = function(e){
myP.innerHTML += "<br />div发生了滚动。";
};
</script>
</body>
</html>
6.3.2. 效果图
7. onpageshow事件
7.1. onpageshow事件在用户浏览网页时触发。
7.2. onpageshow事件类似于onload事件, onload事件在页面第一次加载时触发, onpageshow事件在每次加载页面时触发, 即onload事件在页面从浏览器缓存中读取时不触发。
7.3. 为了查看页面是直接从服务器上载入还是从缓存中读取, 你可以使用PageTransitionEvent对象的persisted属性来判断。如果页面从浏览器的缓存中读取该属性返回ture, 否则返回false。
7.4. 语法
7.4.1. html中:
<element onpageshow="myScript">
7.4.2. JavaScript中:
object.onpageshow=function(){myScript};
8. onpagehide事件
8.1. onpagehide事件在用户离开网页时触发。
8.2. 离开网页有多种方式。如点击一个链接, 刷新页面, 提交表单, 关闭浏览器等。
8.3. onpagehide事件有时可以替代 onunload 事件, 但 onunload 事件触发后无法缓存页面。
8.4. 语法
8.4.1. html中:
<element onpagehide="myScript">
8.4.2. JavaScript中:
object.onpagehide=function(){myScript};
9. 例子
9.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>onpageshow和onpagehide事件</title>
</head>
<body>
<script type="text/javascript">
var pageshowHistory = localStorage.getItem("onpageshow");
if(pageshowHistory != 'null' && pageshowHistory != null){
document.write('用户浏览网页时间记录: ' + localStorage.getItem("onpageshow") + '<br />');
}else{
document.write('没有用户浏览记录。');
}
var pagehideHistory = localStorage.getItem("onpagehide");
if(pagehideHistory != 'null' && pagehideHistory != null){
document.write('用户退出网页时间记录: ' + localStorage.getItem("onpagehide") + '<br />');
}
function formatDate(){
var d = new Date();
return d.getFullYear() + '年' + d.getMonth() + '月' + d.getDate() + '日' + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
}
document.body.onpageshow = function(e){
var time = formatDate();
(pageshowHistory != 'null' && pageshowHistory != null) ? (pageshowHistory = pageshowHistory.slice(0, pageshowHistory.length - 1) + ', ' + time + ']') : (pageshowHistory = '[' + time + ']');
localStorage.setItem("onpageshow", pageshowHistory);
console.log('--------onpageshow---------')
};
document.body.onpagehide = function(e){
var time = formatDate();
(pagehideHistory != 'null' && pagehideHistory != null) ? (pagehideHistory = pagehideHistory.slice(0, pagehideHistory.length - 1) + ', ' + time + ']') : (pagehideHistory = '[' + time + ']');
localStorage.setItem("onpagehide", pagehideHistory);
console.log('--------onpagehide---------')
};
</script>
</body>
</html>
9.2. 效果图
10. onerror事件
10.1. onerror事件在加载外部文件(文档或图像)发生错误时触发。
10.2. 语法
10.2.1. html中:
<element onerror="myScript">
10.2.2. JavaScript中:
object.onerror=function(){myScript};
10.3. 例子
10.3.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onerror事件</title>
<script type="text/javascript">
function imgLoadError(e){
console.log('图片加载错误');
}
function jsLoadError(e){
console.log('js加载错误');
}
function cssLoadError(e){
console.log('css加载错误');
}
</script>
<link rel="stylesheet" type="text/css" href="xxx.css" onerror="cssLoadError(event)" />
</head>
<body>
<img id="myImg" src="xxx.png" alt="xxx.png" onerror="imgLoadError(event)" />
<script type="text/javascript" src="xxx.js" onerror="jsLoadError(event)"></script>
</body>
</html>
10.3.2. 效果图
11. onhashchange事件
11.1. onhashchange事件在当前URL的锚部分(以'#'号为开始)发生改变时触发。
11.2. 锚部分的实例: http://www.example.com/test.htm#part5
11.3. 你可以使用以下方式调用事件:
11.3.1. 通过设置Location对象的location.hash或location.href属性修改锚部分。
11.3.2. 使用不同书签导航到当前页面(使用"后退"或"前进"按钮)。
11.3.3. 点击链接跳转到书签锚。
11.4. 语法
11.4.1. html中:
<element onhashchange="myScript">
11.4.2. JavaScript中:
object.onhashchange=function(){myScript};
11.5. 例子
11.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>onhashchange</title>
</head>
<body onhashchange="hashChange(event)">
<button onclick="changePart()">点我改变hash值</button>
<script type="text/javascript">
function changePart() {
location.hash = "part5";
}
function hashChange(e){
alert(location.hash);
}
</script>
</body>
</html>
11.5.2. 效果图