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) })

---

总结