DOM02~

事件

事件

高阶函数

环境对象

编程思想

综合案例

事件

事件监听

事件监听版本

事件类型

  1. 什么是事件？

    1.1 事件是编程时系统内发生的动作或者发生的事情

  2. 什么是事件监听？

    2.1 让程序检测是否有事件产生。一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

    2.3 语法 元素(事件源).addEventListener('事件', 要执行的函数)

    2.4 事件监听三要素

    • 事件源：那个 DOM 元素被事件触发了，该 DOM 元素 为事件源

    • 事件：用什么方式触发

    • 事件调用的函数:要做什么事

  3. 事件监听版本

    3.1 DOM L0 事件源.on事件 = function(){}

    3.2 DOM L2 事件源.addEventListener(事件， 事件处理函数)

    3.3 发展史 L0 --> L1 --> L2 --> L3

  4. 事件类型

    4.1 鼠标事件 鼠标触发

    • click -- 事件点击

    • mouseenter -- 鼠标经过

    • mouseleave -- 鼠标离开

    4.2 焦点事件 表单获得光标

    • focus -- 获得焦点

    • blur -- 失去焦点

    4.3 键盘事件 键盘触发

    • Keydown -- 键盘按下触发

    • Keyup -- 键盘抬起触发

    4.4 文本事件 表单输入触发

    • input 用户输入事件

  5. demo

<!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>
    <button>点击</button>
​
    <script>
        // 获取元素
        let btn = document.querySelector('button')
        // 绑定事件 -- 事件监听
        btn.addEventListener('click', function() {
            alert('你碰我了')
        })
    </script>
</body>
</html>

 

高阶函数

高阶函数

函数表达式

回调函数

  1. 什么是高阶函数？

    1.1 高阶函数可以被简单理解为函数的高级应用，js 中函数可以被当成值来对待，基于这个特性实现函数的高级应用

    1.2 值：js 中的数据，如数值、字符串、布尔、对象等

  2. 函数表达式

  3. 回调函数

    3.1 什么是回调函数

    • 当一个函数当作参数来传递给另一个函数的时候，这个函数就是回调函数

    • 使用匿名函数作为回调函数比较常见

  4. demo

<!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>
    <button></button>
    <script>
        // 函数表达式 函数当作值赋值给变量
        let fn = function() {}
        document.querySelector('button').onclick = function() {}
        // 回调函数 --> function(){}
        setInterval(function(){}, 1000)
        setInterval(fn, 1000)
        document.querySelector('button').addEventListener('click', function() {})
        document.querySelector('button').addEventListener('click', fn)
​
    </script>
</body>
</html>

环境对象

环境对象

规则

  1. 什么是环境对象

    1.1 环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

  2. 环境对象的作用

    2.1 弄清环境对象 this 的指向，可以让代码更简洁

  3. 规则

    3.1 谁调用，this 指向谁

  4. demo

<!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>
    <button>点击</button>
​
    <script>
        // 环境对象 this 就是个对象
        function fn() {
            //  指向 window 对象
            console.log(this);
        }
​
        // fn()
        window.fn()
​
        let btn = document.querySelector('button')
        // btn 调用了这个函数 所以 this 指向 btn
        btn.addEventListener('click', function() {
            // this --> 对象 object
            console.log(typeof this)
            console.log(this)
        })
    </script>
</body>
</html>

编程思想

排他思想

  1. 什么是排他思想？

    1.1 当前元素为 A 状态，其他元素为 B 状态

  2. 使用

    2.1 干掉所有人 --> 使用 for 循环

    2.2 复活自己 --> 通过 this 或者小标找到自己或对应的元素

  3. demo

<!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>
        .active{
            background-color: pink;
        }
    </style>
​
</head>
<body>
    <button class="active">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
​
    <script>
        let btns = document.querySelectorAll('button')
        // for (let i = 0; i < btns.length; i++) {
        //     btns[i].addEventListener('click', function() {
        //         // 干掉其他人
        //         for(let j = 0; j < btns.length; j++) {
        //             btns[j].classList.remove('active')
        //         }
        //         // 复活自己
        //         this.classList.add('active')
        //     })
        // }
​
        // 提升效率
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function() {
                // 找到唯一的 active 类 删除
                document.querySelector('.active').classList.remove('active')
                // 复活自己
                this.classList.add('active')
            })
        }
    </script>
</body>
</html>

综合案例

Tab 栏切换

需求 点击不同的选项卡，底部可以显示不同的内容

  1. demo

<!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>
        .active{
            background-color: pink;
        }
​
        div{
            display: none;
        }
​
        .boxActive{
            display: block;
        }
    </style>
​
</head>
<body>
    <button class="active">选项卡</button>
    <button>选项卡</button>
    <button>选项卡</button>
​
    <div class="boxActive">1</div>
    <div>2</div>
    <div>3</div>
​
    <script>
        // 获取所有 btn 元素
        let btns = document.querySelectorAll('button')
        // 为每一个 btn 元素绑定 事件监听
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function() {
                // tab 栏切换
                // 将之前的选中元素 去除 选中样式
                document.querySelector('.active').classList.remove('active')
                // 给现在的选中元素 添加 选中样式
                this.classList.add('active')
​
                // 获取所有 box 元素
                let boxes = document.querySelectorAll('div')
                // 将之前的选中元素 去除 选中样式
                document.querySelector('.boxActive').classList.remove('boxActive')
                // 给现在的选中元素 添加 选中样式
                boxes[i].classList.add('boxActive')
            })
        }
    </script>
</body>
</html>
posted @   litilestar  阅读(61)  评论(0)  编辑  收藏  举报
相关博文：
· DOM04~
· DOM05~
· DOM事件
· Web API-day02
· No.4.2
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae