JavaScript Day7

Follow_浩弟

已于 2023-09-05 19:00:47 修改

阅读量35

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-08-27 20:28:03 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132526951

版权

1.事件

1.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

1.2 事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

1.3 事件对象event

在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。

什么时候会产生event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
事件通常与函数结合使用，函数不会在事件发生前被执行！

1.3.1 事件对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #f00;
            overflow: auto;
        }
        .son{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <a href="https://www.baidu.com">跳转</a>

    <script>
        // 事件对象
        var box = document.getElementsByTagName("div")[0];
        var son = document.getElementsByClassName("son")[0];

        var alink = document.getElementsByTagName("a")[0];

        // 事件对象的使用
        box.onclick = function(event){
            event.stopPropagation();
            console.log(box);
            console.log(event);

            // target 事件的触发者
            console.log(event.target);
        }

        son.onclick = function (e) {
            // 阻止事件传播（阻止事件冒泡）
            // e.stopPropagation();
            console.log(son);
        }
        
        alink.onclick = function(e){
            // 阻止默认事件
            e.preventDefault();
        }
    </script>
</body>
</html>

1.3.2 事件对象(event)的属性

属性和方法	描述
`type`	返回当前 event 对象表示的事件的名称。
`preventDefault()`	通知浏览器不要执行与事件关联的默认动作(阻止默认行为)
`target`	返回触发此事件的元素（事件的目标节点）。
`currentTarget`	返回其事件监听器触发该事件的元素。
`keyCode`	返回键盘事件中的键码值
`stopPropagation()`	阻止事件传播。

1.3.3 this指向总结(重点)

自定义构造函数中this:指向实例化对象
普通函数中this:指向window
自定义对象的方法中this:指向当前对象
事件绑定的函数中的this:指向事件的绑定者

1.3.4 事件对象的兼容性写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>点击</div>


    <script>
        function addMyEvent(ele, type, fun) {
            // 标准浏览器
            if (ele.addEventListener) {
                ele.addEventListener(type, fun)
            } else if (ele.attachEvent) {       // 如果有 attachEvent 方法，代表是 IE浏览器
                ele.attachEvent("on" + type, fun)
            } else {
                ele["on" + type] = fun;
            }
        }

        var box = document.getElementsByTagName("div")[0];
        addMyEvent(box, "click", function () {
            console.log(this);
        })
    </script>
</body>

</html>

2. 事件的类型

2.1 鼠标事件(12个)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            overflow: auto;
        }
        .son{
            width: 100px;
            height: 800px;
            background: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        // 事件三要素
        // 事件源
        // 事件类型
        // 事件处理程序

        // 获取元素
        var box = document.getElementsByTagName("div")[0];

        // onmouseover  鼠标刚进入元素时触发
        // box.onmouseover = function () {
        //     console.log("鼠标刚进入元素");
        // }

        // onmouseenter 鼠标完全进入时触发
        // box.onmouseenter = function(){
        //     console.log("鼠标完全进入元素");
        // }

        // onmouseover（onmouseout） 和 onmouseenter（onmouseleave） 区别： 是否进行事件冒泡

        // onmousemove 鼠标在元素上移动时触发
        // box.onmousemove = function(){
        //     console.log("鼠标移动");
        // }

        // onmouseout 鼠标刚要离开元素时触发
        // box.onmouseout = function(){
        //     console.log("我走了");
        // }

        // onmouseleave 鼠标完全离开元素时触发
        // box.onmouseleave = function(){
        //     console.log("我真走了啊");
        // }

        // onmousedown 鼠标按下时触发
        // box.onmousedown = function(){
        //     console.log("鼠标按下");
        // }

        // onmouseup 鼠标弹起时触发
        // box.onmouseup = function(){
        //     console.log("鼠标弹起");
        // }

        // onclick 鼠标单击事件
        // box.onclick = function(){
        //     console.log("点我");
        // }

        // ondblclick 鼠标双击事件
        // box.ondblclick = function(){
        //     console.log("双击666");
        // }

        // onmousewheel 鼠标滚轮被滚动时触发
        // box.onmousewheel = function(){
        //     console.log("车轮滚滚");
        // }

        // onscroll 当元素滚动条被滚动时触发
        box.onscroll = function(){
            console.log("滚动条动了");
        }

        // oncontextmenu 当用户点击鼠标右键打开菜单时触发
        box.oncontextmenu = function(){
            console.log("你想干啥？");
        }
    </script>
</body>

</html>

事件类型	说明
onmouseover	鼠标刚进入元素时触发
onmouseenter	鼠标完全进入元素时触发
onmousemove	鼠标在元素上移动时触发
onmouseout	鼠标刚要离开元素时触发
onmouseleave	鼠标完全离开元素时触发
onmousedown	鼠标按下时触发
onmouseup	鼠标弹起时触发
onclick	鼠标单击时触发
ondblclick	鼠标双击时触发
onmousewheel	当鼠标滚轮正在被滚动时运行的脚本
onscroll	当元素滚动条被滚动时运行的脚本
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发（右击）

循环绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 150px;
            height: 60px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var oli = document.getElementsByTagName("li");

        // 循环绑定事件
        for(var i=0;i<oli.length;i++){
            oli[i].onclick = function(){
                console.log(this);
            }
        }
    </script>
</body>
</html>

2.2 表单事件(6个)

事件类型	说明
onchange	内容改变事件
onfocus	获取焦点时触发的事件
onblur	失去焦点时触发的事件
oninput	输入事件
onsubmit	表单提交事件
onreset	表单重置事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单 -->
    <!-- 输入框 -->
    <!-- type 输入框类型 -->
    <!--    text password radio checkbox file submit reset button -->
    <!-- name 输入框名称 -->
    <!-- value 输入框的值 -->
    <!-- placeholder 输入框的提示信息 -->
    <!-- maxlength 输入框的最大输入长度 -->
    <!-- <input type="text" name="" value="" placeholder="提示信息" maxlength="10"> -->
    <!-- 下拉列表 -->
    <!-- <select name="" id="">
        <option value=""></option>
    </select> -->
    <!-- 文本域 -->
    <!-- <textarea name="" id="" cols="30" rows="10" maxlength=""></textarea> -->


    <!-- 表单事件 -->
    <form action="">
        <input type="text">

        <!-- 提交 -->
        <input type="submit">
        <!-- 充值 -->
        <input type="reset">
    </form>

    <script>
        var inp = document.getElementsByTagName("input")[0];
        var oform = document.getElementsByTagName("form")[0];
        
        
        // 1.onchange  内容改变事件（当输入框失焦，才代表输入结束，才会执行onchange）
        inp.onchange = function () {
            console.log("内容改变了");
        }

        // onfocus 获取焦点时触发
        inp.onfocus = function () {
            console.log("获取焦点");
        }

        // onblur 失去焦点时触发
        inp.onblur = function () {
            console.log("失去焦点");
        }

        // oninput 输入事件（正在输入）
        inp.oninput = function () {
            console.log("正在输入");
        }

        // onsubmit 表单提交事件
        oform.onsubmit = function(){
            console.log("提交");
        }

        // onreset 表单重置事件
        oform.onreset = function(){
            console.log("重置");
        }
    </script>

</body>

</html>

2.2.1表单事件应用的场景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 233px;
            height: 156px;
            position: relative;
        }
        span {
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <input type="text">

    <div>
        <textarea name="" id="" cols="30" rows="10" maxlength="300"></textarea>
        <span>还能输入300字</span>
    </div>
    <script>
        var oinp = document.getElementsByTagName("input")[0];

        var text = document.getElementsByTagName("textarea")[0];
        var msg = document.getElementsByTagName("span")[0];

        // 在输入结束之后拿到输入框中的值
        oinp.onchange = function () {
            console.log("输入结束");
            console.log(oinp.value);
        }

        // 在获取焦点之后
        oinp.onfocus = function () {
            console.log("获取焦点");
            console.log("展示搜索记录");
            console.log("清除提示信息");
        }

        // 实时监听用户的输入
        text.oninput = function () {
            console.log(text.value.length);
            msg.innerHTML = "还能输入" + (300-text.value.length) + "字";
        }


    </script>
</body>

</html>

2.3 键盘事件(3个)

事件类型	说明
onkeydown	键盘按键按下时触发
onkeypress	键盘按着不放时触发
onkeyup	键盘按键弹起时触发

e.keyCode:获取输入键盘的键码，13回车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>
        // 键盘按下事件
        window.onkeydown = function (e) {
            console.log("键盘按下");
            // console.log(e);

            // 触发键盘按下事件的键码
            console.log(e.keyCode);

            if(e.keyCode === 13){
                console.log("按下回车键要执行的代码");
            }
        }

        // 键盘弹起事件
        window.onkeyup = function () {
            console.log("键盘弹起");
        }

        // 键盘按着不放时触发
        // window.onkeypress = function(){
        //     console.log("按着不松");
        // }
    </script>
</body>
</html>

2.4 窗口事件(3个)

事件类型	说明
onload	文档及其资源文件都加载完成时触发
onresize	事件会在窗口或框架被调整大小时发生。
onunload	关闭网页时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function () {
            var box2 = document.getElementsByTagName("div")[0];
            console.log(box2);
        }

    </script>
</head>

<body>
    <div>我爱你，其他两句，都是废话</div>

    <script>
        // onload 当文档和资源文件加载完成时触发
        // window.onload = function () {
        //     console.log("加载完成");
        // }

        var box1 = document.getElementsByTagName("div")[0];
        console.log(box1);

        // onresize 窗口大小发生变化时触发
        window.onresize = function(){
            console.log("窗口发生变化");
        }

        // 关闭网页时触发
        window.onunload = function(){
            console.log("拜拜");
        }
    </script>
</body>

</html>

3. 注册事件处理程序

3.1 通过HTML标签属性注册事件处理程序

3.2 通过DOM元素属性注册事件处理程序

3.3 使用addEventListener()方法注册事件处理程序

addEventListener事件绑定、监听、捕获 ---》标准浏览器中有作用，非标准IE不兼容
语法：元素.addEventListener(事件名,函数,true/false) true代表事件捕获，false代表事件冒泡。
由于现在的浏览器都是执行事件冒泡，所以第三个参数通常写成false。

使用方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1.通过html标签直接添加事件 -->
    <div onclick="alert('你好')">一行写你，一行写我，一行写我们</div>

    <script>
        var box = document.getElementsByTagName("div")[0];


        // 2.通过 "on" 绑定事件，相同事件只能执行一个
        // box.onclick = function(){
        //     alert("说的太好了！");
        // }

        // box.onclick = function () {
        //     alert("会说你就多说两句");
        // }

        // 3.addEventListener()  可以添加多个相同的事件
        box.addEventListener("click", function() {
            alert("太感动了！");
        });

        box.addEventListener("click", function() {
            alert("呜呜呜~");
        });

        box.addEventListener("mouseover", function() {
            console.log("来了老弟？");
        })
    </script>
</body>

</html>

4.事件传递过程（事件流）

JS和HTMl元素的交互几乎都是通过“事件”来完成的，事件从触发到完成响应一般分为3个阶段：捕获阶段，目标阶段和冒泡阶段。

捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。
目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。
事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

1、一个完整的JS事件流是从window开始，最后回到window的一个过程
2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程

5.阻止默认事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="https://www.baidu.com">百度</a>

    <script>
        var alink = document.getElementsByTagName("a")[0];

        alink.onclick = function(e) {
            // 阻止默认事件
            // 1.添加prevenDefault()
            e.preventDefault();
            // 2. 添加retur false
            return false;
        }
    </script>
</body>

</html>

6.事件委托

原本绑定在子元素身上的事件,现在绑定到父元素上,利用事件冒泡的传递的过程,来触发当前的事件,这样的做法叫做事件委托,也叫事件代理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li{
            width: 150px;
            height: 60px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <script>
        // 有10个li，都要绑定鼠标移入事件

        // 循环绑定事件
        // var oli = document.getElementsByTagName("li");
        // for(var i=0;i<oli.length;i++){
        //     oli[i].onmouseover = function(){
        //         this.style.backgroundColor = "pink";
        //     }

        //     oli[i].onmouseout = function(){
        //         this.style.backgroundColor = "transparent";
        //     }
        // }


        // 事件委托：将原本绑定在子元素身上的事件，绑定在父元素身上，利用事件冒泡传递的过程来触发当前的事件,这样的做法叫做事件委托,也叫事件代理。
        // 获取父元素
        var oul = document.getElementsByTagName("ul")[0];

        oul.onmouseover = function(e){
            // 事件的触发者
            console.log(e.target);
            e.target.style.backgroundColor = "pink"
        }
        oul.onmouseout = function(e){
            // 事件的触发者
            console.log(e.target);
            e.target.style.backgroundColor = "transparent"
        }
    </script>
</body>
</html>

7.JavaScript种常用的坐标属性

7.1MouseEvent属性

由鼠标事件（MouseEvent）可以发现：其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。

属性	作用
clientX、clientY	点击位置距离当前body可视区域的x，y坐标
pageX、pageY	(不会随着滚动条的滚动而改变)对于整个页面来说，包括了被卷去的body部分的长度,相对文档区域左上角距离
screenX、screenY	点击位置距离当前电脑屏幕的x，y坐标
offsetX、offsetY	鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 2000px;
            height: 1200px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        var box = document.getElementsByTagName("div")[0];

        box.onclick = function(e){

            // clientX clientY  点击位置距离 body 可视区域的 x 坐标和 y 坐标
            console.log(e.clientX);
            console.log(e.clientY);

            console.log("-------------------------------------");

            // pageX  pageY (不会随着滚动条的滚动而改变)对于整个页面来说，包括了被卷去的body部分的长度,相对文档区域左上角距离
            console.log(e.pageX);
            console.log(e.pageY);

            console.log("-------------------------------------");

            // screenX screenY 点击位置距离电脑屏幕边缘的距离
            console.log(e.screenX);
            console.log(e.screenY);

            console.log("-------------------------------------");

            // offsetX  offsetY 鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)
            console.log(e.offsetX);
            console.log(e.offsetY);
        }
    </script>
</body>
</html>

7.2 元素（HTMLElement）的offset属性(重点)

offset这个属性，可以说是非常有用的，顾名思义，offset翻译过来就是偏移量，从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。

属性	作用
offsetTop	元素相对父元素上边的偏移。(只读)
offsetLeft	元素相对父元素左边的偏移。(只读)
offsetWidth	自身包括padding 、边框、内容区的宽度。
offsetHeight	自身包括padding、边框、内容区的高度。
offsetParent	作为偏移参照点的父级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            position: relative;

            margin: 20px 50px;
        }

        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #f00;
            position: absolute;
            left: 100px;
            top: 80px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box" style="color: red;"></div>
    </div>

    <script>
        var box = document.getElementsByClassName("box")[0];

        // DOM  对象  属性
        console.dir(box);

        // 只读不可写
        // offsetWidth  盒子的宽
        // offsetHeight 盒子的高
        // offsetLeft 盒子的左偏移量
        // offsetTop 盒子的上偏移量

        // offsetParent 做为参照的父级元素

        console.log(box.offsetLeft);        // 100
        console.log(box.offsetTop);         // 80

        console.log(box.offsetWidth);       // 202
        console.log(box.offsetHeight);      // 202

        console.log(box.style.left);   // 不会得到偏移量
        console.log(box.style.width);   // 不会得到宽
        console.log(box.style.color);   // 只有样式在行内才能获取到

        // 设置样式,后面是字符串
        // box.style.left = "200px"
        box.offsetLeft = 400;
    </script>
</body>
</html>

offsetLeft 和left 的区别

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的。

区别在于：

style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。
style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。

7.3 元素的client属性

属性	作用
clientHeight/clientWidth	内容可视区域的高度/宽度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线)
clientLeft/clientTop	这两个返回的是元素周围边框的厚度,可以理解为边框的长度,如果不指定一个边框或者不定位改元素,他的值就是0.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        var box = document.getElementsByTagName("div")[0];

        // clientWidth  clientHeight     元素可视区域的宽高
        console.log(box.clientWidth);
        console.log(box.clientHeight);

        // clientLeft  clientTop        元素的边框厚度
        console.log(box.clientLeft);
        console.log(box.clientTop);
    </script>
</body>
</html>

7.4 元素的scroll 属性

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

属性	作用
scrollTop	返回被卷去的上侧距离，返回数值不带单位
scrollLeft	返回被卷去的左侧距离，返回数值不带单位
scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 500px;
            border: 1px solid #f00;
            margin: 0 auto;
            overflow: auto;
        }
        .son{
            width: 400px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var box = document.getElementsByClassName("father")[0];


        // scrollTop  scrollLeft  元素被卷进去的距离
        // scrollWidth scrollHeight 返回自身实际的宽度和高度
        document.onscroll = function () {
            console.log(document.documentElement.scrollTop);
        }

        box.onscroll = function(){
            console.log(box.scrollTop);
            console.log(box.scrollLeft);
            console.log(box.scrollWidth);
            console.log(box.scrollHeight);
        }
    </script>
</body>
</html>

7.5 window的坐标属性

属性	作用
window.innerWidth	返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。(只读)
window.innerHeight	返回以像素为单位的窗口的内部高度。如果有水平滚动条，也包括滚动条高度。(只读)
window.pageXOffset	获取当前页面相对于窗口显示区左上角的 X 位置。（只读）<br />（页面卷进去的距离）
window.pageYOffset	获取当前页面相对于窗口显示区左上角的 Y 位置。（只读）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 2000px;
            height: 2000px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        // window.innerWidth 窗口的宽度
        // window.innerHeight 窗口的高度
        console.log(window.innerWidth);
        console.log(window.innerHeight);

        // window.pageXOffset  窗口被卷到左边的大小
        console.log(window.pageXOffset);
        // window.pageYOffset 窗口被卷到上边的大小
        console.log(window.pageYOffset);
    </script>
</body>
</html>