JS页面加载事件
让我为大家介绍一下页面加载事件吧！
我们为什么需要使用页面加载事件？
1.有些时候需要等页面资源全部处理完了做一些事情
2.有部分的人喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
一、load
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
监听页面所有资源加载完毕
我们通常都是给window 添加load 事件
注意: 不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
我们不添加load事件时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
const btn = document.querySelector("button")
btn.onclick = function(){
console.log(1) //点击后不打印 没有用
}
</script>
</head>
<body>
<button>点击</button>
</body>
</html>
当我们添加load事件时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
const btn = document.querySelector("button")
btn.onclick = function () {
console.log(1) //点击按钮后 打印 1
}
}
</script>
</head>
<body>
<button>点击</button>
</body>
</html>
二、DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
监听页面DOM加载完毕
给document添加 DOMContentLoaded 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.addEventListener("DOMContentLoaded", function () {
const btn = document.querySelector("button")
btn.onclick = function () {
console.log(1) //点击后打印 1
}
})
</script>
</head>
<body>
<button>点击</button>
</body>
</html>
感谢大家的阅读，如有不对的地方，大家可以向我提出，感谢大家！
