页面加载事件
有时候需要等页面资源全部处理完之后做一些事情。页面加载事件就是加载外部资源(如图片,外联CSS和JavaScript)加载完毕时触发的事件
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
</script>
</head>
<body>
<button>点击</button>
</body>
由于代码是从上往下执行,所以点击按钮并不会触发弹窗。
事件名:load
监听页面所有资源加载完毕:
- 给window添加load事件
<script>
//等待页面所有资源加载完毕,就回去执行回调函数
window.addEventListener('load', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
</script>
注:不光可以监听整个页面加载完毕,也可以针对某个资源绑定load事件。
事件名:DOMContentLoaded
document. addEventListener('DOMContentLoaded',function(){
//执行的操作
})
元素滚动事件
滚动条在滚动到时候持续触发的事件
监听整个页面的滚动
<script>
window.addEventListener('scroll', function () {
//执行的操作
})
</script>
scrollLeft和scrollTop:
- 获取被卷去的大小
- 获取元素内容往左,往上滚出去看不到的距离
- 这两个值是可写的
注意:获取HTML元素document.documentElement
<script>
//数字型,不带定单位,可赋值,一打开页面就已经往上滑800像素,
window.addEventListener('scroll', function () {
console.log(document.documentElement.scrollTop);
})
</script>