Day24-扩展

金霖海

已于 2023-07-14 16:53:26 修改

阅读量326

点赞数

分类专栏：前端1 文章标签： javascript 前端 html

于 2023-07-14 16:50:47 首次发布

本文链接：https://blog.csdn.net/qq_33396183/article/details/131727356

版权

前端1 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

文章目录

补充

补充

一盒模型相关的属性(了解)

属性名	说明
`clientWidth、clientHeight`	获取元素的宽高（包含了内边距,不包含边框和外边距）
offsetWidth、offsetHeight	获取元素的宽高（包含了内边距、包含了边框）

<!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: 100px;
            height: 100px;
            border: 10px red solid;
            padding: 20px;
            margin: 20px;
            /* 怪异模式 */
            /* box-sizing: border-box; */
        }
    </style>
</head>
<body>
    <!-- 
        盒模型
            宽高
            内边距
            边框
            外边距
        盒子模式
            标准模式 总宽 = 宽 + 内边距 + 边框
            怪异模式 总宽 = 宽
     -->

     <div class="box"></div>

     <script>
        let obox = document.querySelector(".box")
        //获取盒子的宽和高
        // console.log(obox.clientWidth);
        // console.log(obox.clientHeight);

        console.log(obox.offsetWidth);
        console.log(obox.offsetHeight);
     </script>
</body>
</html>

二事件

1 事件的发展史

DOM0和1级，早期这两种事件是浏览器厂商自己来定的，没有统一的标准，每家浏览器标准都不一样。

DOM2级事件，是标准W3C规范。

2 DOM2级事件

    <button id="btn">点我啊</button>
    <script>
        /**
         * 事件的绑定方式
         *  1.标签上帮事件
         *  2.DOM0级事件
         *  3.DOM2级事件
         *      语法:标签.addEventListener(事件类型,事件触发后要调用的函数)
         *      特点:一个标签可以绑定多个同名类型的事件
         *      
        */
        //拿到按钮
        let obtn = document.querySelector("#btn")
        //给标签绑定dom2级事件
        obtn.addEventListener("click",function(){
            alert("我被点击了")
        })

        obtn.addEventListener("click",function(){
            alert("哈哈哈!")
        })
    </script>

可以给标签绑定多个同名事件,标准用法

3 事件流

事件流：指的就是某个事件触发的时候，事件在嵌套的标签中按照特定的顺序来执行

事件流分为事件冒泡和事件捕获

绑定事件如果你用DOM0级的方式来绑定，目前所有浏览器都只能支持冒泡

但是你用DOM2级的方式来绑定事件，你既可以支持冒泡，也可以支持捕获

1.事件冒泡

目前所有浏览器默认都是冒泡的方式，从内往外进行事件传播，false：默认冒泡

    <div>
        <p>点我啊</p>
    </div>
    <script>
        //获取到body标签
        let obody = document.querySelector("body")
        //获取到div标签
        let odiv = document.querySelector("div")
        //获取到p标签
        let op = document.querySelector("p")

        //给三个标签分别绑上点击事件
        obody.addEventListener("click",function(){
            alert("body标签被点击了")
        },false)

        odiv.addEventListener("click",function(){
            alert("div标签被点击了")
        },false)

        op.addEventListener("click",function(){
            alert("p标签被点击了")
        },false)
    </script>

2.事件捕获

事件捕获:事件的传播方向是从外向内,true代表事件捕获

    <div>
        <p>点我啊</p>
    </div>
    <script>
        //获取到body标签
        let obody = document.querySelector("body")
        //获取到div标签
        let odiv = document.querySelector("div")
        //获取到p标签
        let op = document.querySelector("p")

        //给三个标签分别绑上点击事件
        obody.addEventListener("click",function(){
            alert("body标签被点击了")
        },true)

        odiv.addEventListener("click",function(){
            alert("div标签被点击了")
        },true)

        op.addEventListener("click",function(){
            alert("p标签被点击了")
        },true)
    </script>

总结：如果同时存在两种事件方式，先执行捕获，在执行冒泡

3.Event事件传播对象

只要有事件绑定，就一定会产生一个event对象，这个对象是事件传播对象(事件源对象)

event包含了事件源对象的所有信息

    <button id="btn" type="button" >按钮</button>
    <script>
        /**
         * 只要有事件绑定,就一定会产生event对象(事件传播对象)
         * 我们可以通过event.target获取到事件源对象
        */
        let obtn = document.querySelector("#btn")

        obtn.addEventListener("click",function(event){
            console.log(event.target);
        })
    </script>

4 事件委托

概念：事件委托(事件代理)指的就是借助于冒泡机制以及event对象，将子元素身上的事件交给父元素处理。减少页面代码

<!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{
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="zzks">正在考试</button>
        <button class="ctb">错题本</button>
        <button class="scj">收藏夹</button>
        <button class="sxlx">顺序练习</button>
        <button class="fllx">分类练习</button>
    </div>


</body>
</html>

三事件类型(了解)

页面事件

事件类型	说明
load	文档就绪事件
scroll	页面滚动
unload	页面卸载了时候，触发的事件（离开这个页面） onunload
resize	当页面的尺寸发生变化时触发

<!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>
        // 文档就绪事件,当html文档被浏览器加载完后,再执行js代码
        window.onload = function(){
            let obtn = document.querySelector("#btn")
            console.log(obtn);
        }
    </script>
</head>
<body>
    <button id="btn" type="button">按钮</button>
</body>
</html>

load事件代表页面结构加载完毕后再执行对应的JS代码。将JS放在head中了

鼠标事件

事件类型	说明
`onclick`	单击事件
`ondblclick`	双击事件
`onmouseover`	鼠标移入时触发
`onmouseout`	鼠标移出时触发
`onmousemove`	鼠标移动时

    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
    </style>
    <div class="box" ></div>
    <script>
        //拿到div
        let obox = document.querySelector(".box")
        //鼠标移入事件
        obox.onmouseover = function(){
            console.log("鼠标移动到div里面了");
        }
        //鼠标移出事件
        obox.onmouseout = function(){
            console.log("鼠标移出div");
        }
    </script>

键盘事件

事件类型	说明
`onkeydown`	键盘按下时（按下时会一直触发）
`onkeyup`	键盘按键松开时
`onkeypress`	按住键盘时（按下时会一直触发）

如何得到按的是哪个键？

event.key得到按下键的字母

表单事件

事件类型	说明
`focus`	input获取到焦点的时候
`blur`	input失去焦点的时候
`input`	输入框内容发生改变时
`change`	值最后发生改变后触发

四案例

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>
        .left{
            width: 150px;
            height: 300px;
            border: 1px black solid;
            position: fixed;
            top: 200px;
            left: 0;
        }

        .bottom{
            width: 200px;
            height: 200px;
            border: 1px black solid;
            position: fixed;
            right: 0;
            bottom: 0;
        }

        .left > button{
            /* 绝对定位相对于有定位的父容器定位 */
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .bottom > button{
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="left">
        <button>关闭</button>
    </div>
    <div class="bottom">
        <button>关闭</button>
    </div>

    <script>
        // let btn1 = document.querySelector(".left > button")
        // btn1.onclick = function(){
        //     /**
        //      * 在事件函数中的this代表事件源对象
        //      * parentElement获取父节点
        //      * display = "none"让标签隐藏
        //     */
        //     this.parentElement.style.display = "none"
        // }

        // let btn2 = document.querySelector(".bottom > button")
        // btn2.onclick = function(){
        //     this.parentElement.style.display = "none"
        // }
        //获取到页面上所有的按钮
        let btnArr = document.querySelectorAll("button")
        btnArr.forEach(btn =>{
            btn.onclick = function(){
                /**
                 * 在事件函数中的this代表事件源对象
                 * parentElement获取父节点
                 * display = "none"让标签隐藏
                */
                this.parentElement.style.display = "none"
            }
        })

    </script>
</body>
</html>

2 选项卡

<!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>
    <link rel="stylesheet" href="./css/tab.min.css">
</head>
<body>
    <!-- 选项卡 -->
    <div class="tab">
        <!-- 标题 -->
        <div class="title">
            <button class="selected">标题1</button>
            <button>标题2</button>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div>内容一</div>
            <div>内容二</div>
        </div>
    </div>
    
    <script>
        //拿到标题中所有的按钮
        let obtns = document.querySelectorAll(".tab .title button")
        //拿到内容里面所有的div
        let odivs = document.querySelectorAll(".tab .content >div")
        
        obtns.forEach((btn,index) =>{
            //给按钮绑定点击事件
            btn.onclick = function(){
                for(let i=0;i<obtns.length;i++){
                    //1.移除所有按钮的class="selected"
                    obtns[i].removeAttribute("class")
                    //2.影藏所有的内容div
                    odivs[i].style.display="none"
                }
                //3给被点击的按钮加样式
                this.setAttribute("class","selected")
                //4让按钮对应的div显示出来
                odivs[index].style.display="block"
            }
        })
    </script>
</body>
</html>