webapi（二）- 事件

且陶陶

发布于 2023-04-12 15:28:23

7100

发布于 2023-04-12 15:28:23

文章被收录于专栏：Triciaの小世界

事件

含义

事件是在编程时系统内发生的动作或者发生的事（比如用户再网页上单击一下按钮）

事件监听

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

语法：

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

事件监听三要素

事件源：哪个dom元素被事件触发了
事件：用什么方式触发
事件调用的函数：要做什么事 例如：

        // 给元素注册上事件
        let btn = document.querySelector('button')
        // 语法：元素.addEventListener('事件', 要执行的函数)
        btn.addEventListener('click' , function () {
            alert('啊~ 达咩呦~  我被点啦')
        })

注意：

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

事件监听版本

DOM L0: 事件源.on事件 = function(){} 例如：

    // 绑定事件DOM L0
    // 缺点：会出现覆盖现象 而addEventListener不会出现覆盖
    let btn = document.querySelector('button')
    btn.onclick = function() {
      alert(`我是用DOM L0写的`)
    }
    btn.onclick = function() {
      alert(`我是用DOM L0写的 +1`)
    }

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

DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

事件类型

1. 鼠标事件

鼠标触发

click：鼠标点击
mouseenter：鼠标经过
mouseleave：鼠标离开
mousemove：鼠标移动

2. 焦点事件

表单获得光标

focus：获得焦点
blur：失去焦点

3. 键盘事件

键盘触发

keydown：键盘按下触发
keyup：键盘抬起触发

4. 文本事件

表单输入触发 input：用户输入事件

高阶函数

含义

把函数当作值来看待，

值：就是JavaScript中的数据，比如数值、字符串、布尔、对象等

包括

函数表达式

let counter = function(x , y) {
            return x + y
        }
        let sum = counter(5 , 10)
        console.log(sum)

回调函数

（回头再调用的函数）

如果将函数A作为参数传递给函数B时，我们称A为回调函数

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

// 回调函数：把一个函数当成参数传递给另外一个函数，就说该函数是个回调函数
        // 例如    :定时器函数
        setInterval(function(){} , 1000)
        // 注册事件
        document.body.addEventListener('click' , function() {})

环境对象

this

事件处理函数中的this指向事件源

例如：

let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            // 点击时改变按钮颜色
            // this是内置的，可以直接来使用
            // 使用this更加灵活
            this.style.backgroundColor = 'lime'  // 在此事件处理函数中，this 指向事件源（即被触发的事件  btn）
            console.log(this)
        })

排他思想

干掉所有人，复活我自己

事件发生时，只有我自己生效，其他所有都不生效

例如：

<!-- 此时有一半的按钮是粉色的 -->
    <button>第1个</button>
    <button class="pink">第2个</button>
    <button>第3个</button>
    <button class="pink">第4个</button>
    <button>第5个</button>
    <button class="pink">第6个</button>
    <button>第7个</button>

// 需求：点击按钮，让当前点击的按钮高亮（添加pink类名），其他元素不能高亮（移除pink类名）

        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('pink')
                }
                // 复活我自己
                this.classList.add('pink')
            })
        }

补充：

当一开始只有一个生效时，可以只“干掉”这一个

例如：

<button>第1个</button>
    <button class="pink">第2个</button>
    <button>第3个</button>
    <button>第4个</button>
    <button>第5个</button>
    <script>
        // 排他思想做法2-升级
        // 只适用于一开始高亮元素只有一个的时候
        // 干掉多余的类名的元素
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                document.querySelector('.pink').classList.remove('pink')
                btns[i].classList.add('pink')
            })
        }
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-15，如有侵权请联系 cloudcommunity@tencent.com 删除

webapi