day23 其他事件(页面加载事件、页面滚动事件)

目录

    • 页面加载事件
    • 页面/元素滚动事件
      • 页面滚动事件——获取位置

页面加载事件

  • 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
  • 为什么使用:
    • 有时候需要等页面资源全部处理完毕再做一些事
    • 老代码喜欢把script写在head中,这时候直接找dom元素找不到
  • 事件名:load
  • 监听页面所有资源加载完毕
    • window添加load事件

注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件。

示例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        //方式1.等待页面所有资源加载完毕,就回去执行回调函数
        window.addEventListener('load', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert('hhh')
            })
        })
        img.addEventListener('load',function(){
            //方式2.等待图片加载完毕,再执行里面的代码
        })
    script>
head>

<body>
    <button>clickbutton>
body>

html>
  • 当初始的HTML文档被完全加载和解析完成后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载
  • 事件名:DOMContentLoaded
  • 监听页面DOM加载完毕
    • document添加DOMContentLoaded事件

示例:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert('hhh2')
            })
        })
    script>
head>

<body>
    <button>clickbutton>
body>

html>

页面/元素滚动事件

  • 滚动条在滚动的时候持续触发的事件
  • 为什么使用
    • 很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如回到顶部
  • 事件名:scroll
  • 监听整个页面滚动
    • 给window或document添加scroll事件
  • 监听某个元素的内部滚动直接给某个元素添加即可
  • 使用场景
    • 想要页面滚动一段距离后就显示隐藏,可以使用scroll来检测滚动的距离

示例:页面滚动事件
day23 其他事件(页面加载事件、页面滚动事件)_第1张图片

<style>
        body {
            height: 3000px;
        }
    style>
head>

<body>
    <script>
        window.addEventListener('scroll', function () {
            console.log('hhh')
        })
    script>

body>

页面滚动事件——获取位置

  • scrollLeft和scrollTop(属性)
    • 获取被卷去的大小
    • 获取元素内容往左、往上滚出去看不到的距离
    • 这两个值是可读写

示例1:
day23 其他事件(页面加载事件、页面滚动事件)_第2张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body {
            padding-top: 100px;
            height: 3000px;
        }

        div {
            margin: 100px;
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    style>
head>

<body>
    <div>
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
    div>
    <script>
        // window.addEventListener('scroll', function () {
        //     // console.log('hhh')
        // })
        const div = document.querySelector('div')
        div.addEventListener('scroll', function () {
            // console.log('hhh')
            console.log(div.scrollTop)
        })
    script>

body>

html>

示例2——获取页面滚动的位置:

注意原理:
day23 其他事件(页面加载事件、页面滚动事件)_第3张图片

效果:
day23 其他事件(页面加载事件、页面滚动事件)_第4张图片
滚动小于100像素时不显示

day23 其他事件(页面加载事件、页面滚动事件)_第5张图片
滚动大于等于100像素时显示

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body {
            padding-top: 100px;
            height: 3000px;
        }

        div {
            display: none;
            margin: 100px;
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    style>
head>

<body>
    <div>
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
    div>
    <script>
        const div = document.querySelector('div')
        window.addEventListener('scroll', function () {
            // console.log('hhh')
            // 页面滚动多少像素?
            // 获取html元素写法
            //下面这行代码必须写在里面,获取数字型数据,没有单位
            console.log(document.documentElement.scrollTop)
            const n = document.documentElement.scrollTop
            if (n >= 100) {
                div.style.display = 'block'
            } else {
                div.style.display = 'none'
            }
        })
        // const div = document.querySelector('div')
        // div.addEventListener('scroll', function () {
        //     // console.log('hhh')
        //     console.log(div.scrollTop)
        // })
    script>

body>

html>

补充:

  • 可以赋值,设置页面初始位置,例如:
    document.documentElement.scrollTop = 800

你可能感兴趣的:(记录前端学习,javascript,前端,开发语言)