Web APIs笔记02——DOM-事件基础

最新推荐文章于 2024-08-03 17:33:50 发布

visionchyw

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量84

点赞数 1

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

本文链接：https://blog.csdn.net/visionchyw/article/details/125485041

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件

事件监听

什么是事件？
事件是在编程时系统内发生的动作或者发生的事情。比如用户在网页上单击一个按钮
什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
语法：元素.addEventListener('事件'，要执行的函数)
事件监听三要素：
➢事件源：那个dom元素被事件触发了，要获取dom元素
➢事件：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
➢事件调用的函数：要做什么事

<script>
    // 1.获取元素
    let btn = document.querySelector('button')
    // 2.事件监听(注册事件)
    btn.addEventListener('click', function() {
    alert('被点击了')
})
</script>

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次

拓展阅读-事件监听版本

DOM L0
事件源.on事件 = function() { }
DOM L2
事件源.addEventListener(事件，事件处理函数)
发展史：
➢DOMLO :是DOM的发展的第-个版本; L: level
➢DOM L1: DOM级别1于1998年10月1日成为W3C推荐标准
➢DOM L2:使用addEventListener注册事件
➢DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型.

事件类型

事件类型	事件类型
鼠标事件：鼠标触发	click 鼠标点击；mouseenter 鼠标经过；mouseleave 鼠标离开
焦点事件：表单获得光标	focus 获得焦点；blur 失去焦点
键盘事件：键盘触发	Keydown 键盘按下触发；Keyup键盘抬起触发
文本事件：表单输入触发	input 用户输入事件

高阶函数

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高
级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

<script>
        let num = 10
        //函数表达式
        let fn = function () { }
        btn.onclick = function () { }
        // 高阶函数 函数的高级用法，把函数当值来看看

        //  回调函数

        // setInterval(function(){}, 1000)
        function fn() { }
        setInterval(fn, 1000)
        // 此时 fn 就是回调函数   回头去调用的函数

        box.addEventListener('click', fun)
        function fun() {

        }
    </script>

函数表达式

函数表达式和普通函数并无本质上的区别：

<script>
    //函数表达式与普通函数本质上是一样的
    let counter = function (x, y) {
        return X + y
    }
    //调用函数
    let result = counter(5, 10)
    console.log(result )
</script>

普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

<script>
    function fn() {
    console.log('我是回调函数...')
    // fn传递给 JsetInterval, fn就是回调函数
    setInterval(fn, 1000)
</script>

<script>
    box.addEventListener('click', function() { 
    console.log('我也是回调函数')
    })
</script>

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】 是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<body>
    <button>点击</button>
    <script>
        // 环境对象 this 他就是个对象
        function fn() {
            console.log(this)
        }
        // fn()
        window.fn()

        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            console.log(typeof this)
            // 因为btn 调用了这个函数，所以 this 指向btn
        })
    </script>
</body>

编程思想

排他思想

当前元素为A状态,其他元素为B状态
使用：
1.干掉所有人：使用for循环
2.复活他自己：通过this或者下标找到自己或者对应的元素

<body>
    <button>第1个</button>
    <button>第2个</button>
    <button>第3个</button>
    <button class="pink">第4个</button>
    <button>第5个</button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // this.classList.add('pink')
                // 干掉所有人
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('pink')
                }
                // 复活我自己
                this.classList.add('pink')
            })
        }
    </script>
</body>

排他思想升级

<body>
    <button class="">第1个</button>
    <button class="">第2个</button>
    <button class="">第3个</button>
    <button class="">第4个</button>
    <button class="pink">第5个</button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // this.classList.add('pink')
                // // 干掉所有人
                // for (let j = 0; j < btns.length; j++) {
                //     btns[j].classList.remove('pink')
                // }
                // 我只需要找出那个唯一的 pink类，删除
                document.querySelector('.pink').classList.remove('pink')
                // 我的
                this.classList.add('pink')
            })
        }
    </script>
</body>