1. 事件监听

1.1 事件监听

1. 语法：元素对象.addEventListener('事件类型',要执行的函数)
2. 三要素：
   1. 事件源：哪个dom元素被事件触发了，要获取dom元素
   2. 事件类型：用什么方式触发，比如鼠标点击click、鼠标经过 mouseover 等
   3. 事件调用的函数：要做什么事
3. 注意：
   1. 事件类型要加引号
   2. 函数是触发之后执行的，每触发一次都会执行一次

1.2 事件监听版本

1. DOM L0 ：事件源.on事件 = function(){}
   1. 同一个对象，后面注册的事件会覆盖前面注册的（同一个事件）
   2. 直接使用null覆盖就可以实现事件解绑
   3. 都是冒泡阶段执行的（没有捕获）
2. DOM L2 ：事件源.addEventListener(事件, 事件处理函数,是否使用捕获)
   1. 后面注册的事件不会覆盖前面注册的事件（同一个事件）
   2. 可以通过第三个参数去确定是在冒泡阶段还是在捕获阶段执行
   3. 必须使用removeEventListener来解绑事件
   4. 匿名函数无法解绑事件
3. 区别：on方式会被覆盖，addEventListener方法可以绑定多次，拥有事件更多特性，推荐使用。

2. 事件类型

2.1 鼠标事件

1. click：鼠标点击
2. mouseenter：鼠标经过
3. mouseleave：鼠标离开
4. mouseover和mouseout会有冒泡效果（不推荐）
5. mouseenter和mouseleave没有冒泡效果（推荐）

2.2 焦点事件

1. focus：获得焦点
2. blur：失去焦点

2.3 键盘事件

1. keydown：键盘按下触发
2. keyup：键盘抬起触发

2.4 文本事件

1. input：用户输入触发

3. 事件对象

3.1 获取事件对象

1. 语法
   1. 在事件绑定的回调函数的第一个参数就是事件对象，一般命名为 event/ev/e
   2. 示例

      btn.addEventListener("click", (e) => {console.log("e",e);
      });
      

3.2 事件对象常用属性

1. type :获取当前的事件类型
2. clientX/clientY：获取光标相对浏览器可见窗口左上角的位置
3. offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
4. key：用户按下的键盘键的值

4. 环境对象

1. 环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
2. 作用：弄清楚this的指向，可以让代码更简洁
   1. 函数的调用方式不同，this 指向的对象也不同
   2. [谁调用，this就指向谁]

5. 回调函数

1. 把函数当做另一个函数的参数传递，这个函数就叫回调函数
2. 回调函数本质还是函数，只不过把它当成参数使用
3. 使用匿名函数作为回调函数比较常见