目标：掌握事件绑定处理和事件对象，完成常见网页交互
- 事件监听
- 事件类型
- 事件对象
- 拓展知识
- 综合案例
| 描述 | 属性/方法 | 效果 |
| 事件监听 | 元素.addEventListener() | 事件监听，事件绑定，事件注册 |
| 事件类型 | 鼠标事件 | click 鼠标点击 mouseenter 鼠标进入 mouseleave 鼠标离开 |
| 焦点事件 | focus 获得焦点 blur 失去焦点 | |
| 键盘事件 | keydown 键盘按下 keyup 键盘抬起 | |
| 文本事件 input | 当表单value 被修改时触发 | |
| 事件对象 | e.key | 判断用户按下哪个键 |
| 环境对象 | this | 谁调用，指向谁 |
事件监听
监听什么？
以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如
- 点击按钮可以弹出警示框
- 比如鼠标经过显示下拉菜单等等
像上述功能，需要浏览器时刻监听着用户的行为来做特定的事情（事件），这个就叫做监听
事件
事件是浏览器针对用户的各种行为定义出的一些列的响应机制，当程序在运行时，用户特定的行为就会触发特定的响应机制来执行指定的函数代码
- 比如用户点击按钮时，可以 触发
click事件，弹出警示框
- 比如用户使用鼠标划入某个盒子时，可以触发
mouseenter事件，显示下拉菜单
事件监听基本用法
事件监听也称为: 事件注册、事件绑定
语法：
元素对象.addEventListener('事件类型', 事件处理函数)事件监听三要素
- 事件源(哪个元素对象被触发了) -> 事件监听是将事件处理函数注册到元素对象身上
- 事件类型 (什么情况下触发，点击还是鼠标经过等)
- 事件处理函数（要做什么事情，是弹出警告框，还是修改元素值，还是修改css属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听</title>
</head>
<body>
<button class="btn">唐伯虎</button>
<script>
// 需求： 点击button按钮，页面会弹出一个警示框，内容显示 '秋香'
// 事件监听语法:
// 元素对象.addEventListener('事件类型', 事件处理函数)
// 1. 获取元素对象 button按钮
const btn = document.querySelector('.btn')
// 2. 事件监听
btn.addEventListener('click', function () {
alert('秋香')
})
</script>
</body>
</html>
注意：
1.事件类型要加引号，小写
2.函数是点击之后再去执行，每次点击都会执行一次
事件监听-随堂练习
需求：点击关闭按钮之后，关掉登录提示盒子
分析：
①：事件源： 关闭按钮 a链接
②：事件类型：鼠标点击 click
③：事件处理程序：关闭的是父盒子
核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素
图片素材下载：function,Web,const,函数,APIs,index,笔记,事件,addEventListener From： https://blog.csdn.net/weixin_67448099/article/details/144469838