window对象的常见事件

最新推荐文章于 2024-04-07 16:33:25 发布

hcoke

最新推荐文章于 2024-04-07 16:33:25 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/m0_62962469/article/details/123706788

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

1.窗口加载事件

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像，脚本文件，css文件等)，就调用的处理函数。

注意：

有了window.onload就可以把js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

window.onload = function() {
    //事件等
}
//或者
window.addEventListener('load', function() {
       //事件等
})

window.onload传统事件注册方式只能写一次，如果有多个，会以最后一个window.onload为准。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.querySelector('button');
				btn.onclick = function() {
					alert('点击出现弹框');
				}
			}
			window.onload = function() {
				alert('22');
			}
		</script>
	</head>
	<body>
		<button type="button">
			按钮
		</button>
	</body>
</html>

页面加载完毕之后只会弹出22，点击按钮之后没有预想中的会出现弹框，内容为''点击出现弹框''。

如果使用addEventListener就没有数量的限制，可以随意写多个都会体现在页面中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// window.onload = function() {
			// 	var btn = document.querySelector('button');
			// 	btn.onclick = function() {
			// 		alert('点击出现弹框');
			// 	}
			// }
			// window.onload = function() {
			// 	alert('22');
			// }
			window.addEventListener('load', function() {
				alert(22);
			})
			window.addEventListener('load', function() {
					var btn = document.querySelector('button');
					btn.onclick = function() {
						alert('点击出现弹框');
					}
			})
		</script>
	</head>
	<body>
		<button type="button">
			按钮
		</button>
	</body>
</html>

2.窗口加载事件

document.addEventListener('DOMContentLoaded', function() {

})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。IE9以上支持。

假如页面元素很多的话，从用户访问到onload触发可能需要较长的时间，必然影响到用户的体验，此时用DOMContentLoaded事件比较合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.addEventListener('load', function() {
				alert(22);
			})
			window.addEventListener('load', function() {
					var btn = document.querySelector('button');
					btn.onclick = function() {
						alert('点击出现弹框');
					}
			})
			window.addEventListener('DOMContentLoaded', function() {
				alert(33);
			})
		</script>
	</head>
	<body>
		<button type="button">
			按钮
		</button>
	</body>
</html>

load是等页面元素全部加载完毕，包括页面DOM元素图片 flash css等。

DOMContentLoaded是DOM加载完毕，不包含图片 flash css等就可以执行。加载速度比load更快一些。