让我为大家介绍一下页面加载事件吧！
我们为什么需要使用页面加载事件？
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>
感谢大家的阅读，如有不对的地方，大家可以向我提出，感谢大家！
