DOM事件

认识Dom事件

DOM中的事件 -> 行为，行为背后对应着某个（某些）待执行函数。

事件的基本逻辑

1. 给元素的某个行为添加上对应的函数 （称为事件处理函数）。
2. 等到用户对该元素实施该行为。
3. 浏览器会检测到 在元素上 该行为发生了，会马上触发该行为绑定的函数。
4. 函数执行，那么会产生相应的交互或者动画的效果。

常用的事件绑定方法

const h1 = document.querySelector(".en")

function abc(){

}

h1.addEventListener('click',abc)

事件处理函数中的this: 非箭头函数中是指向绑定元素本身的，可以通过this 来访问元素。如果你需要在事件处理函数中使用this，就用function关键字的函数。

重要的事件对象 

事件对象

事件处理函数中系统自动传入的第一个参数。

事件（行为）发生后，所有相关的信息都会在事件对象中，可以让程序员进行使用。我们可以通过事件对象来获取到这些信息，从而实现各种想要的交互效果。

要想获取事件对象，就只需要在事件处理函数中我定义一个形参，通过第一个形参获取这个事件对象，这个形参命名可以自定义 一般来说命名为e 或者event。

body.addEventListener('click', (e) => {
  console.log("我是body")
})

一般来说，事件对象中有非常多的属性和一些方法不同的属性，会在不同的类型上通过继承来实现，可以根据事件对象类型的继承关系，去相应的父类上找到属性和方法的说明。

事件对象的常用属性（重要）

事件对象的常用属性

事件流机制

事件目标

我们的行为事件真正作用的那个元素节点，一定是行为作用到的最深层的那个元素节点。

浏览器是 能在我们行为之后 判断出我们的事件目标是哪个元素节点。也知道 我们对元素 进行的是什么操作。

事件流只要相应行为或者事件发生了就会产生，但是如果任何一层都没有注册相应事件处理函数 那么啥都不会发生。

事件流的三个阶段

整个事件信号的传递 捕获阶段 → 目标阶段 → 冒泡阶段：

• 捕获阶段 事件从最顶层元素window全局对象，一直传递到目标元素的父元素
• 目标阶段 事件到达目标火元素，如果事件指定不冒泡，就会在这里终止
• 冒泡阶段 事件从目标元素的父元素向上出租传递到最顶层的window对象上

DOM基本的事件函数绑定方式默认绑定在事件流的冒泡阶段 。但是不是所有事件都会冒泡， 不冒泡的事件只会到目标阶段就停止了。父子层级结构非视觉层面（z-index）而是物理层面(结构)，子元素可以看成是在父元素的深层。

如何把事件处理函数添加到不同阶段

通过 addEventListener 方法可以把事件处理函数添加到捕获阶段阶段被触发，第三个参数 如果传入true 就是捕获阶段触发，不传参默认就是false ，在冒泡阶段触发 。

event.target与event.currentTarget

同一个事件流过程中的触发的所有事件处理函数中的事件对象，都有target 和 currentTarget属性。

所有事件处理函数中事件对象的targe属性指向的都是引发该事件流的事件目标对象。

但是各个被执行的事件处理函数中的事件对象中的currentTarget属性指向的都是该函数绑定的元素。

实现交互动画的基本逻辑

1. 从生硬样式状态的切换 到产生过渡 是如何产生的

   1. 通过连续快速的改变某个元素的样式 一般是 style属性
   2. 通过transition 设置不同的样式 两个或者多个状态（style 和 css）
   3. 通过css Animation 添加class来实现
   4. 通过Animation这个类型（JS Element.animate() 这个方法）

2. 如何选择呢

   1. 实时交互性变化 持续修改style属性（字体大小和鼠标位置相关）
   2. 行为发生后的一种过渡变化效果 一个状态到另一个状态的变化 transition 最适合两个状态之间变化 animation可实现更多状态之间的变化
   3. 复杂的动画 一般都是通过AE制作完 然后导出到代码中能用的格式 直接导入使用 比如像lottie这个库

3. 需要的相关信息

   1. 获取当前事件的相关信息 在哪里点击的 （坐标点）
   2. 获取当前元素的相关信息 操作元素本身 还有就是场景信息

4. 最常见的变化 透明度 尺寸大小 位置 颜色 投影这些

注意：获取当前事件的相关信息时，有些信息是针对target的，有些事currentTarget的，这可能引起混乱，所以必要时直接pointer-event:none。

动画交互常用的属性与方法 

动画交互的常用属性与方法

常见事件

常见事件

浏览器事件

补充

事件委托机制

节流与防抖