零、文章目录

文章地址

• 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
• 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

• Gitee：https://gitee.com/bluecusliyou/TechLearn
• Github：https://github.com/bluecusliyou/TechLearn

Web APIs二、DOM事件基础

1、事件监听

（1）事件

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

（2）事件监听

• 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件

• 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

• 语法：元素对象.addEventListener('事件类型'，要执行的函数)

• 事件监听三要素：

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

• 注意：

  • 事件类型要加引号
  • 函数是点击之后再去执行，每次点击都会执行一次

案例如下：

点击

广告点击关闭：

我是广告
X

随机点名案例：

随机点名
名字是：
这里显示姓名
开始结束

（3）事件监听版本

• DOM L0：事件源.on事件 = function() { }
• DOM L2：事件源.addEventListener(事件， 事件处理函数)
• 区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
• 发展史：
  • DOM L0 ：是 DOM 的发展的第一个版本； L：level
  • DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
  • DOM L2：使用addEventListener注册事件
  • DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

案例如下：

点击

2、事件类型

（1）鼠标事件

轮播图完整版：

对人类来说会不会太超前了？
<>

（2）焦点事件

小米搜索框：

全部商品
小米11
小米10S
小米笔记本
小米手机
黑鲨4
空调

（3）键盘事件

（4）文本事件

3、事件对象

（1）事件对象

• 事件对象

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

  • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

• 使用场景

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

（2）如何获取

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

（3）事件对象常用属性

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

（4）案例

点击

回车发布评论：

发布
0/200字
清风徐来
大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]
2022-10-10 20:29:21

4、环境对象

• **环境对象：**指的是函数内部特殊的变量this 。
• 对象调用的方法，this就指向调用对象。
• 直接调用函数，其实相当于是 window.函数，所以this指向window对象。

案例如下：

点击

5、回调函数

• 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
• 简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

6、综合案例

（1）tab栏切换

每日特价
精选
美食
百货
个护
预告

（2）全选按钮案例

 全选
商品
商家
价格
小米手机
小米
￥1999
小米净水器
小米
￥4999
小米电视
小米
￥5999