前端笔记69——窗口事件

最新推荐文章于 2023-11-17 20:46:53 发布

野生杂学家阿博

最新推荐文章于 2023-11-17 20:46:53 发布

阅读量424

点赞数

分类专栏：前端文章标签：前端 JavaScript 窗口 windows onload

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/86684068

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

前面分享了鼠标事件、键盘事件、表单事件，再分享一个窗口事件。窗口英文是windows，简单理解窗口事件是windows有关的事件。

事件名称和触发场景

事件名称          触发场景

onload           当对象加载完成以后触发
onresize         当窗口改变的时候触发

onload事件例子

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//window 最顶层的对象
			window.onload = function() {
				var oBox = document.getElementById("box")
				// oBox --- null
				console.log(oBox)
				alert(oBox.innerHTML)
			}
		</script>
	</head>

	<body>
		<div id="box">box1</div>
	</body>
</html>

onresize事件例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onresize = function(){
				// 窗口改变的时候去计算宽高，来做布局
				// 获取浏览器区域的高度
				console.log(document.documentElement.clientHeight)
			}
		</script>
	</head>
	<body>
	</body>
</html>