定制版网站建设详细报价单建立网站需要什么技术
文章目录
- 前言
- 一、事件对象的概念和语法
- 二、事件对象常用属性
- 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)})
总结
