js事件和事件模型

专题简介

• 事件与事件流
• 原始事件模型
• 标准事件模型
• IE事件模型

事件和事件流

什么是事件

指用户的鼠标动作和键盘动作，document的load和unloaded，事件被封装成一个event对象，包含了该事件发生时的所有相关信息（event的属性）以及可以对事件进行的操作（event的方法）。

事件流是什么

用于DOM是一个树结构，如果在父子节点绑定事件的时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到事件流的概念 事件流都会经历三个阶段

• 事件捕获阶段(capture phase)
• 处于目标阶段(target phase)
• 事件冒泡阶段(bubbing phase)

事件冒泡

是一种从下往上的传播方式，由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点

事件捕获

事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受事件，而最具体的节点(触发节点)最后接受事件

事件模型

事件模型可以分为三种：

• 原始事件模型(DOM0级)
• 标准事件模型(DOM2级)
• IE事件模型(基本不用)

原始事件模型

事件类型上面有ON（onclick） 没有事件的传播(事件一旦发生就立刻调用事件句柄) 一个DOM对象只能注册一个类型的事件，如果注册了两个，则会发生覆盖，只执行后一个事件；

原始事件模型两种写法

1. HTML代码中直接绑定

<input type="button"  οnclick="fun()">

2. 通过js代码绑定

let btn  = document.getElementById(".btn");
btn.onclick = fun;

特性：绑定速度快

DOM0级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载处理，以至于事件可能无法正常运行

• 只支持冒泡，不支持捕获
• 同一类型的事件只能绑定一次 如上，当希望为同一个元素绑定多个类型事件的时候(上面的这个btn元素绑定两个点击事件)，是不被允许的，后绑定的事件会覆盖之前的事件

删除DOM0级事件处理程序只要将对应事件属性置为null即可

btn.onclick = null

标准事件类型

在改事件模型中，一次事件共有三个过程：

• 事件捕获阶段：事件从document一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行
• 事件处理阶段：事件到达目标元素，触发目标元素的监听函数
• 事件冒泡阶段：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行 事件绑定监听函数的方法如下：

addEventListener(eventType,hander,userCapture)

事件移除监听函数的方式如下：

removeEventListener(eventType,hander,useCapture)

IE事件模型

IE事件模型共有两个过程:

• 事件处理阶段：事件到达目标元素, 触发目标元素的监听函数.
• 事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

事件绑定监听函数的方式如下:

attachEvent(eventType, handler)

事件移除监听函数的方式如下:

detachEvent(eventType, handler)