学习链接

冒泡和捕获

创建自定义事件

面试官：说说JavaScript中的事件模型

Javascript事件模型系列（四）我所理解的javascript自定义事件

事件模型

(事件模型-1 介绍更详细，这里只是为了提一下分类)

事件模型可以分为三种：

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

原始事件模型

事件绑定监听函数比较简单, 有两种方式：

• HTML代码中直接绑定

<input type="button" onclick="fun()">

• 通过JS代码绑定

var btn = document.getElementById('.btn');
btn.onclick = fun;

特性

• 绑定速度快

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

• 只支持冒泡，不支持捕获
• 同一个类型的事件只能绑定一次

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

btn.onclick = null;

标准事件模型

在该事件模型中，一次事件共有三个过程:

• 捕获阶段
• 目标阶段
• 冒泡阶段

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

addEventListener(eventType, handler, useCapture)

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

removeEventListener(eventType, handler, useCapture)

特性

• 可以在一个 DOM 元素上绑定多个事件处理器，各自并不会冲突

• 可指定触发监听函数的阶段（捕获阶段或者冒泡阶段）

IE事件模型

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

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

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

attachEvent(eventType, handler)

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

detachEvent(eventType, handler)

举个例子：

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);