JavaScript学习文档（8）：事件监听、事件类型、事件对象、环境对象、回调函数、Tab栏切换

目录

一、事件监听

1、事件监听

（1）什么是事件

（2）什么是事件监听

（3）语法

（4）事件监听的三要素：

2、点击关闭顶部广告案例

3、随机点名案例

4、事件监听版本

二、事件类型

1、鼠标事件（鼠标触发）

2、焦点事件（表单获得光标）

3、键盘事件（键盘触发）

4、文本事件（表单输入触发）

5、事件类型案例

（1）小米搜索框案例

（2）评论字数统计

三、事件对象

1、获取事件对象

（1）事件对象是什么

（2）使用场景

（3）语法

2、事件对象常用属性

（1）常用属性

3、评论回车发布案例

四、环境对象

1、环境对象：

2、作用：

五、回调函数

1、什么是回调函数

六、Tab栏切换

---

一、事件监听

1、事件监听

（1）什么是事件

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

（2）什么是事件监听

• 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事 件
• 比如鼠标经过显示下拉菜单，点击可以播放轮播图等等

（3）语法

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

（4）事件监听的三要素：

• 事件源：那个dom元素被事件触发了，要获取dom元素
• 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
• 事件调用的函数：要做什么事

示例代码如下：

  <button>点击</button>
  <script>
    // 需求： 点击了按钮，弹出一个对话框
    // 1. 事件源   按钮  
    // 2.事件类型 点击鼠标   click 字符串
    // 3. 事件处理程序 弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你早呀~')
    })
  </script>

2、点击关闭顶部广告案例

需求：点击关闭之后，顶部关闭 分析：

①：点击的是关闭按钮

②：关闭的是父盒子

核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示

示例代码如下：

  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    // 1. 获取事件源
    const box1 = document.querySelector('.box1')
    //  关闭的是大盒子
    const box = document.querySelector('.box')
    // 2. 事件侦听
    box1.addEventListener('click', function () {
      box.style.display = 'none'
    })
  </script>

3、随机点名案例

分析：

① 点击开始按钮随机抽取数组的一个数据，放到页面中

② 点击结束按钮删除数组当前抽取的一个数据

③ 当抽取到最后一个数据的时候，两个按钮同时禁用

核心：利用定时器快速展示，停止定时器结束展示

示例代码如下：

<h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        // 定时器的全局变量
        let timerId = 0
        // 随机号要全局变量
        let random = 0
        // 业务1.开始按钮模块
        const qs = document.querySelector('.qs')
        // 1.1 获取开始按钮对象
        const start = document.querySelector('.start')
        // 1.2 添加点击事件
        start.addEventListener('click', function () {
            timerId = setInterval(function () {
                // 随机数
                random = parseInt(Math.random() * arr.length)
                // console.log(arr[random])
                qs.innerHTML = arr[random]
            }, 35)
            // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
            if (arr.length === 1) {
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
            }
        })

        // 2. 关闭按钮模块
        const end = document.querySelector('.end')
        end.addEventListener('click', function () {
            clearInterval(timerId)
            // 结束了，可以删除掉当前抽取的那个数组元素
            arr.splice(random, 1)
            console.log(arr)
        })
    </script>

4、事件监听版本

（1）发展史

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

二、事件类型

1、鼠标事件（鼠标触发）

click 鼠标点击 mouseenter，鼠标经过 mouseleave 鼠标离开

示例代码如下：

  <div></div>
  <script>
    const div = document.querySelector('div')
    // 鼠标经过
    div.addEventListener('mouseenter', function () {
      console.log(`轻轻的我来了`)
    })
    // 鼠标离开
    div.addEventListener('mouseleave', function () {
      console.log(`轻轻的我走了`)
    })

  </script>

2、焦点事件（表单获得光标）

focus 获得焦点，blur 失去焦点

示例代码如下：

  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
      console.log('有焦点触发')
    })
    input.addEventListener('blur', function () {
      console.log('失去焦点触发')
    })
  </script>

3、键盘事件（键盘触发）

Keydown 键盘按下触发，Keyup 键盘抬起触发

示例代码如下：

  <input type="text">
  <script>
    const input = document.querySelector('input')
    // 1. 键盘事件
    // input.addEventListener('keydown', function () {
    //   console.log('键盘按下了')
    // })
    // input.addEventListener('keyup', function () {
    //   console.log('键盘谈起了')
    // })
    // 2. 用户输入文本事件  input
    input.addEventListener('input', function () {
      console.log(input.value)
    })
  </script>

4、文本事件（表单输入触发）

input 用户输入事件

5、事件类型案例

（1）小米搜索框案例

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

分析：

①：开始下拉菜单要进行隐藏

②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）

③：表单失去焦点，反向操作

示例代码如下：

        // 1. 获取元素
        const input = document.querySelector('[type=search]')
        const ul = document.querySelector('.result-list')
        // console.log(input)
        // 2. 监听事件 获得焦点
        input.addEventListener('focus', function () {
            // ul显示
            ul.style.display = 'block'
            // 添加一个带有颜色边框的类名
            input.classList.add('search')
        })
        // 3. 监听事件 失去焦点
        input.addEventListener('blur', function () {
            ul.style.display = 'none'
            input.classList.remove('search')
        })
    </script>

（2）评论字数统计

需求：用户输入文字，可以计算用户输入的字数

分析：

①：判断用输入事件 input

②：不断取得文本框里面的字符长度, 文本域.value.length

③：把获得数字给下面文本框

示例代码如下：

    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
      // console.log(tx.value.length)  得到输入的长度
      total.innerHTML = `${tx.value.length}/200字`
    })

    // const str = 'andy'
    // console.log(str.length)
  </script>

三、事件对象

1、获取事件对象

（1）事件对象是什么

•  也是个对象，这个对象里有事件触发时的相关信息

（2）使用场景

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

（3）语法

• 在事件绑定的回调函数的第一个参数就是事件对象
• 一般命名为event、ev、e

示例代码如下：

  <!-- <button>点击</button> -->
  <input type="text">
  <script>
    // const btn = document.querySelector('button')
    // btn.addEventListener('click', function (e) {
    //   console.log(e)
    // })

    const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      // console.log(11)
      // console.log(e.key)
      if (e.key === 'Enter') {
        console.log('我按下了回车键')
      }
    })
  </script>

2、事件对象常用属性

（1）常用属性

• type获取当前的事件类型
• clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置 
• offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置 
• key：用户按下的键盘键的值，现在不提倡使用keyCode

3、评论回车发布案例

需求：按下回车键盘，可以发布信息

分析：

①：用到按下键盘事件 keydown 或者 keyup 都可以

②：如果用户按下的是回车键盘，则发布信息

③：让留言信息模块显示，把拿到的数据渲染到对应标签内部

示例代码如下：

    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
      total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
      total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
      // console.log(tx.value.length)  得到输入的长度
      total.innerHTML = `${tx.value.length}/200字`
    })

    // 4. 按下回车发布评论
    tx.addEventListener('keyup', function (e) {
      // 只有按下的是回车键，才会触发
      // console.log(e.key)
      if (e.key === 'Enter') {
        // 如果用户输入的不为空就显示和打印
        if (tx.value.trim()) {
          // console.log(11)
          item.style.display = 'block'
          // console.log(tx.value)  // 用户输入的内容
          text.innerHTML = tx.value

        }
        // 等我们按下回车，结束，清空文本域
        tx.value = ''
        // 按下回车之后，就要把 字符统计 复原
        total.innerHTML = '0/200字'
      }

    })
  </script>

四、环境对象

1、环境对象：

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

2、作用：

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

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

示例代码如下：

  <button>点击</button>
  <script>
    // 每个函数里面都有this 环境对象  普通函数里面this指向的是window
    // function fn() {
    //   console.log(this)
    // }
    // window.fn()
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // console.log(this)  // btn 对象
      // btn.style.color = 'red'
      this.style.color = 'red'
    })
  </script>

五、回调函数

1、什么是回调函数

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

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

示例代码如下：

    <button class="box">点击</button>
    <script>
        // function fn() {
        //     console.log('我是回调函数...');
        // }
        // setInterval(fn, 1000)
        const box = document.querySelector('.box')
        box.addEventListener('click', function () {
            alert('我也是回调函数');
        })
    </script>

六、Tab栏切换

分析：

①：主要核心是类的切换， 设定一个当前类，可以让当前元素高亮

②：鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类，

③：注意，当前类只能有一个

示例代码如下：

  <script>
    // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
    // 1.1 获取 a 元素 
    const as = document.querySelectorAll('.tab-nav a')
    // console.log(as) 
    for (let i = 0; i < as.length; i++) {
      // console.log(as[i])
      // 要给 5个链接绑定鼠标经过事件
      as[i].addEventListener('mouseenter', function () {
        // console.log('鼠标经过')
        // 排他思想  
        // 干掉别人 移除类active
        document.querySelector('.tab-nav .active').classList.remove('active')
        // 我登基 我添加类 active  this 当前的那个 a 
        this.classList.add('active')

        // 下面5个大盒子 一一对应  .item 
        // 干掉别人
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应序号的那个 item 显示 添加 active 类
        document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')

      })
    }
  </script>