当初始的HTML文档被完全加载和解析完成以后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载完成。
事件名:DOMContentLoaded
监听页面DOM加载完毕,是给document添加DOMContentLoaded事件:
document.addEventListener('DOMContentLoaded', function () {
// 执行的操作
})
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 执行的操作
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('DOM加载完毕可以点击了')
})
})
</script>
</head>
<body>
<button>点击</button>
</body>
</html>