JS：事件对象

文章目录

• 前言
• 一、事件对象的概念和语法
• 二、事件对象常用属性
  • 1.获取键盘输入的值
  • 2.获取点击事件的坐标
  • 3.获取事件的类型
  • 4.初步介绍e.target
• 总结

---

前言

事件对象是理解交互式网页的关键。它封装了事件的所有信息，能够帮助我们精准地响应用户操作，实现动态效果，本文将详细介绍事件对象的使用

---

一、事件对象的概念和语法

事件对象是以事件(用户的操作)作为对象，包含了事件所有属性的对象，是浏览器为每个事件生成的实例，它提供了事件的详细信息，如事件类型、目标元素、触发时间等

事件对象的语法：

const 变量 = document.querySelector('标签')
变量.addEventListener('事件类型', function (e) {
  console.log(e)
})

事件绑定的监听器中，函数的第一个参数就是事件对象，命名为e

 在后台中查看e可以看到，事件对象包含了很多属性，下面将介绍几个常用的属性

二、事件对象常用属性

1.获取键盘输入的值

我们创建一个输入框，获取输入框后注册键盘弹起事件(弹起算输入完一个值)，通过e.key能够得到键盘此时输入的值

const ipt = document.querySelector('input')
// 获得键盘输入
ipt.addEventListener('click', function (e) {
  console.log(e.key)
})

 效果如下

2.获取点击事件的坐标

创建一个可以点击的对象，以按钮为例，为按钮注册点击事件，可以通过e.clientX和e.clientY获取鼠标点击的坐标(X和Y都是大写，这个坐标是相对于页面顶部的坐标)

    const btn = document.querySelector('button')
    btn.addEventListener('click', function (e) {
      console.log(e.clientX)
      console.log(e.clientY)
    })

 3.获取事件的类型

还可以通过e.type获取事件的类型

    const btn = document.querySelector('button')
    btn.addEventListener('click', function (e) {
      console.log(e.clientX)
      console.log(e.clientY)
      console.log(e.type)
    })

4.初步介绍e.target

e.target能够获取当前触发事件的对象，是实现事件委托的关键。

事件委托将在后续介绍，注册了ul的点击事件，点击ul下的小li，可以从事件对象的target属性获取ul下的小li对象，获得到的小li对象就是点击的那个小li对象。因此，如果想要让某个小li做出变化，除了获取所有小li遍历伪数组，还可以通过事件对象的target属性得到小li对象后实现

    const ul = document.querySelector('ul')
    ul.addEventListener('click', (e) => {
      console.log(e.target)
    })

---

总结