100_框架对象事件

最新推荐文章于 2022-05-21 12:21:34 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-05-21 12:21:34 发布

阅读量488

点赞数

分类专栏： JavaScript学习文章标签：前端 javascript

本文链接：https://blog.csdn.net/aihiao/article/details/121192245

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

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:

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:

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>&lt;element onscroll="myScript"&gt;<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. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
100_框架对象事件

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. 以下htm
复制链接

扫一扫