Web APIs -DOM事件基础

X习生

已于 2024-09-12 18:13:50 修改

阅读量1.2k

点赞数 18

分类专栏： JavaScpipt 文章标签：前端 javascript 开发语言

于 2024-09-10 12:04:24 首次发布

本文链接：https://blog.csdn.net/weixin_48733159/article/details/142095196

版权

JavaScpipt 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web APIs - DOM事件基础

第7天
掌握事件绑定处理和事件对象，完成常见网页交互

事件监听
事件类型
事件对象
拓展知识（环境对象、排他思想）
综合案例-tab栏切换

在这里插入图片描述

1、事件监听

以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如

点击按钮可以弹出警示框
比如鼠标经过显示下拉菜单等等

1.1 事件

事件是程序在运行的时候，发生的特定动作或者特定的事情

比如点击按钮、
比如鼠标经过菜单等等

通常，当事件发生时，可以做些事情

比如点击按钮，可以 弹出警示框
比如鼠标经过某个盒子，可以显示下拉菜单

1.2 事件监听

事件发生后，想要执行的代码写到事件处理函数里面

当触发指定的事件时，则事件处理函数就会被执行
事件监听是将事件处理函数注册到元素对象身上
事件监听也称为: 事件注册、事件绑定

语法：

元素对象.addEventListener('事件类型', 事件处理函数)

事件监听三要素

事件源(谁被触发了)
事件类型 (什么情况下触发，点击还是鼠标经过等)
事件处理函数（要做什么事情）

<!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>事件监听</title>
  </head>
  <body>
    <button class="btn">唐伯虎</button>
    <script>
      // 需求： 点击button按钮，页面会弹出一个警示框，内容显示 '秋香'
      // 事件监听语法:
      // 元素对象.addEventListener('事件类型', 事件处理函数)
      // 1. 获取元素对象 button按钮
      const btn = document.querySelector('.btn')
      // 2. 事件监听 
      btn.addEventListener('click', function () {
        alert('秋香')
      })
    </script>
  </body>
</html>

注意：

1.事件类型要加引号，小写

2.函数是点击之后再去执行，每次点击都会执行一次

1.3 回调函数

回调函数: 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数（回头调用的函数）

作用： 完成某些特定任务

<script>
  // 1. 定时器间隔函数，里面第一个参数又是函数，这个匿名函数就是回调函数
  setInterval(function () {
    console.log('我是回调函数')
  }, 1000)

  // 2. addEventListener 函数的第二个参数也是函数，这个匿名函数也是回调函数
  btn.addEventListener('click', function () {
    console.log('我是回调函数')
  })
</script>

1.4 事件监听版本

DOM 事件

事件源.on事件类型 = function() { }

btn.onclick = function () {
  alert('我是弹窗1')
}

DOM 2事件（常用）

事件源.addEventListener(事件类型，事件处理函数)

btn.addEventListener('click', function () {
  console.log('我是回调函数')
})

区别：

on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用

2、事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等。

事件类型的大小写敏感的字符串，统一用小写字母

在这里插入图片描述

2.1 鼠标事件

鼠标事件是指跟鼠标操作相关的事件，如单击、经过等。

<body>
  <div class="box"></div>
  <script>
    // 鼠标事件类型
    const box = document.querySelector('.box')
    // 1. 鼠标点击
    box.addEventListener('click', function () {
      console.log('我点击了盒子')
    })
    // 2. 鼠标经过
    box.addEventListener('mouseenter', function () {
      console.log('我鼠标经过了盒子')
    })
    // 3. 鼠标离开
    box.addEventListener('mouseleave', function () {
      console.log('我鼠标离开了盒子')
    })
  </script>
</body>

2.2 焦点事件

主要是针对于表单是否获得光标的事件，获得焦点 focus 、失去焦点 blur

<!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>焦点事件</title>
    <style>
      [type=text] {
        width: 245px;
        height: 50px;
        padding-left: 20px;
        border: 1px solid #ccc;
        font-size: 17px;
        outline: none;
      }
    </style>
  </head>

  <body>
    <input type="text" class="search-text">
    <input type="text" class="search">
    <script>
      // 1. 焦点事件(手动触发) => 输入框，文本框
      const search_text = document.querySelector('.search-text')
      // 1.1 获得焦点  focus 
      search_text.addEventListener('focus', function () {
        console.log('获得了焦点')
      })
      // 1.2 失去焦点 blur
      search_text.addEventListener('blur', function () {
        console.log('失去了焦点')
      })
      // 2. 拓展 自动获得焦点 focus()    自动失去焦点 blur()
      //  2.1 语法: 元素.focus()  比如百度首页搜索框自动获得焦点
      const search = document.querySelector('.search')
      search.focus()
    </script>
  </body>

</html>

2.3 键盘事件和 input事件

事件	触发时机	得到表单值
keydown	按下键盘时触发	不带最后一次按键值 ab
keyup	弹起键盘时触发	输入内容 abc
input	表单value发生变化时触发	输入内容 abc

<!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>input事件和键盘事件</title>
  <style>
    textarea {
      width: 300px;
      height: 30px;
      padding: 10px;
      border-color: transparent;
      outline: none;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
  <script>
    // 获取元素
    const tx = document.querySelector('#tx')

    // 1. 键盘事件 
    // 1.1 键盘按下事件  keydown  当我们按下键盘的时候就触发
    tx.addEventListener('keydown', function () {
      console.log('我是keydown事件' + tx.value)
    })

    // 1.2 键盘弹起事件  keyup 当我们键盘弹起的时候就触发
    tx.addEventListener('keyup', function () {
      console.log('我是keyup事件' + tx.value)
    })

    // 2. 用户输入事件 input ，是表单value的值发生变化的时候触发
    tx.addEventListener('input', function () {
      console.log('我是input事件' + tx.value)
    })
    // 3. 注意事项
    // 3.1 执行顺序  keydown →  input   →  keyup
    // 3.2 keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容
  </script>
</body>

</html>

注意事项

执行顺序 keydown → input → keyup
keydown 获取值的时候得不到最后一次按键的值， keyup和input可以得到用户输入内容

3、事件对象

事件对象是什么?

也是个对象，这个对象里有事件触发时的相关信息，包含属性和方法
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作

<body>
  <div class="box"></div>
  <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
  <script>
    // 事件对象
    const box = document.querySelector('.box')
    box.addEventListener('click', function (e) {
      console.log(e)
    })
    const tx = document.querySelector('#tx')
    tx.addEventListener('keyup', function (e) {
      // e 就是事件对象
      // console.log(e)
      // console.log(e.key)  // a 
      // 用户如果按下的是回车键，则弹出框提示按下了回车键
      if (e.key === 'Enter') {
        alert('您按下了回车键')
      }
    })
  </script>
</body>

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

在这里插入图片描述

4、环境对象

能够分析判断函数运行在不同环境中 this 所指代的对象。

环境对象： 指的是函数内部特殊的 this, 它指向一个对象，并且受当前环境影响

作用： 弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<body>
  <button>点击</button>
  <script>
    // 环境对象 this   粗略规则： 谁调用函数，this就指向谁

    // 1. 全局环境
    // console.log(this)  // this 指向 window 全局对象

    // 2. 普通函数
    function fn() {
      console.log(this)  // this 指向 window 全局对象
    }
    window.fn()

    // 3. 对象方法
    const obj = {
      uname: '佩奇',
      sing: function () {
        console.log(this)  // this 指向 obj对象
      }
    }
    obj.sing()

    // 4. 事件
    const btn1 = document.querySelector('button')
    btn1.addEventListener('click', function () {
      // console.log(this)  // this 指向 btn 这个对象
      // btn1.style.backgroundColor = 'pink'
      this.style.backgroundColor = 'pink'
    })
  </script>
</body>

5、排他思想

是一种思路，目的是突出显示某个元素

比如，有多个元素，当鼠标经过时，只有当前元素会添加高亮样式，其余的元素移除样式

在这里插入图片描述

口诀：注意顺序

①：排除其他人

②：保留我自己

<body>
  <button class="active">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <script>
    // 需求: 鼠标经过每一个小盒子, 当前盒子高亮显示
    // 1. 先获取全部小盒子, 给每一个小盒子添加事件(遍历)
    const btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
      // console.log(btns[i])
      // 2. 给每一个小盒子添加鼠标经过事件
      btns[i].addEventListener('mouseenter', function () {
        // 3. 让当前这个小盒子高亮 this
        // 3.1 先清除所有人的样式
        for (let j = 0; j < btns.length; j++) {
          btns[j].classList.remove('active')
        }
        // 3.2 给当前的添加
        this.classList.add('active')
      })
    }
  </script>

6、综合案例-tab栏切换

需求：鼠标经过不同的选项卡，底部可以显示不同的内容
业务:
①：顶部鼠标经过谁，谁会高亮显示
②：底部跟随切换不同内容

业务1分析：鼠标经过谁，谁会高亮显示
①：给5个链接注册鼠标经过事件（循环注册）
②：鼠标经过当前链接a，先移除其余元素身上的 active 类，而给当前元素添加 active 类（排他思想）

业务2分析：底部跟随切换不同内容
①：显示隐藏底部盒子通过 active 来控制显示隐藏
②: 底部其余 item盒子移除 active 类
③：先把5个item获取过来得到伪数组，然后利用 items[i] 选取对应盒子，然后添加 active

<script>
    // 业务1：tab栏盒子鼠标经过谁，谁会高亮显示
    // 1.1 循环给五个小盒子绑定事件
    const as = document.querySelectorAll('.tab-nav a')
    const items = document.querySelectorAll('.tab-content .item')
    for (let i = 0; i < as.length; i++) {
      // 绑定事件
      as[i].addEventListener('mouseenter', function () {
        // console.log(this)
        // 1.2 让当前鼠标经过的a高亮显示, 其余的a不要高亮 排他思想
        for (let j = 0; j < as.length; j++) {
          as[j].classList.remove('active')
        }
        // 1.3 给当前经过的a添加类名
        this.classList.add('active')
        // 业务2：底部盒子跟随变化 => 鼠标悬停在那个a上,就显示对应的item
        // 2.1 先让 item 隐藏
        document.querySelector('.tab-content .active').classList.remove('active')
        // 2.2 让对应的item显示
        // console.log(items[0])
        items[i].classList.add('active')
      })
    }
  </script>