js 事件

事件流介绍

事件流描述了页面接受事件的顺序。事件流定义了事件冒泡和事件捕获。
事件冒泡是指事件从最具体的元素开始接触，然后向上传播至没有那么具体的元素（文档）
事件捕获的目的是为了在事件最终达到最终目标前进行拦截。事件捕获实际上是指从没有那么具体的元素到最后具体的元素的过程。浏览器一般是从window对象开始

DOM事件流

DOM2EVENTS规范规定事件流分为三个节点:事件捕获，到达目标，事件冒泡

DOM0事件处理流程

在JavaScript中指定事件处理程序的传统方式是把一个函数赋值给（dom元素）一个事件处理程序属性。每个元素都有事件处理程序属性，比如onclick.

let btn = document.getElementById("btn")
btn.onClick= function(){
console.log(this)
}

注意：上述函数方法中的this指向的是元素本身，即Button元素。

DOM1处理事件程序

DOM2 Event为事件处理程序的赋值和移除提供了两个方法 addEventListener removeListener。这两个方法暴露在DOM节点上面。他们接受三个参数，事件名称，事件处理函数和一个布尔值。当布尔值为true的时候，代表事件的触发会出现在捕获阶段，布尔值为false,表示事件的触发生在冒泡阶段。addEventListener和removeListener 的处理事件函数样式必须一样才能达到移除效果，如果addEventListener添加多次，那么事件处理函数也会触发多次。
注意：为了让事件能够回收。当事件所在的元素已经删除，最好把事件也设置为null

事件对象

在DOM合规的浏览器中，event对象是传给事件处理程序的唯一参数。不管是使用何种方式处理，都会传入event事件对象。事件对象的属性有以下。

bubbless:事件是否冒泡
cacelable:表示是否可以取消事件的默认行为
currentTarget:当前事件处理所在的元素
defaultPrevented:true表示已经调用preventDefault方法（表示取消某些元素的特定行为，比如a标签的跳转）
detail:事件相关属性，比如单机两次，detail会变成2，光标出去了会自动变为0
eventPhase:表示调用事件处理程序的阶段 1代表捕获阶段 2代表到达目标 3代表冒泡阶段
preventDefault():用于取消事件的默认行为 cancelable为true才能调用这个方法
stopImmediatePropagation:取消所有后续事件捕获或者事件冒泡，并阻止调用人格后续的事件
stopPropagation:取消所有后续事件捕获或者事件冒泡，只有bubbles为true才可以调用
target:事件的目标
type:代表事件的类型

事件类型

事件可以分为以下几种类型

用户界面事件

焦点事件

鼠标事件

滚轮事件

输入事件

键盘事件

用户界面事件

用户界面数据一般是指界面事件或者UI事件：比如onload，unload
onload事件表示文档已经下载完成或者图片下载完成。图片只要设置了src属性，那么久会触发onload事件
unload：表示文档已经卸载了就会触发这个事件
resize:当浏览器窗口缩放到一个新的高度或者宽度就会触发这个事件
scroll:页面中相关元素发生变化就会触发这个事件

焦点事件

blur:当元素失去焦点时候触发
focus:当元素获得焦点的时候触发

鼠标和滚轮事件

click:用户点击鼠标主键时候触发
dbclick:双击触发
mosedown:按下鼠标任意按键触发,该事件不能通过键盘触发
moseenter:鼠标光标从元素外部移动到元素内部触发
mouseleave:鼠标从元素内部移动到元素外部触发

事件距离相关属性

pageX,pageY :光标在页面中的位置
clientX,clientY:代表光标距离视口的位置
screentX,screenY:表示光标距离桌面的距离
offsetX,offsetY:表示光标距离目标元素的距离

事件委托

过得的事件处理程序需要用到事件委托。事件委托需要一个共同的目标元素。事件委托主要是通过事件冒泡到相同的元素上面，在通过事件的target，来区分不同元素的事件。