JS基础-事件模型(事件&事件流&自定义事件&事件冒泡/代理)

一、事件与事件流

事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。
DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定?这就涉及到事件流的概念，它描述的是页面中接受事件的顺序。

事件流有两种:

• 事件冒泡(Event Capturing): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点。
• 事件捕获(Event Bubbling): 与事件冒泡相反。事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件。

顺序：
捕获阶段-目标阶段-冒泡阶段
同时绑定事件捕获和事件冒泡，会先执行事件捕获。

二、事件模型

• DOM0就是直接通过 onclick写在html里面的事件;
• DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
• DOM3是一些新的事件。

1.DOM0级模型

又称为原始事件模型，在该模型中，事件不会传播，即没有事件流的概念。事件绑定监听函数比较简单, 有两种方式:

1. HTML代码中直接绑定:

2. 通过JS代码指定属性值:

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

移除监听函数：

btn.onclick = null;

这种方式所有浏览器都兼容，但是逻辑与显示并没有分离。

2.IE事件模型

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

• 事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。

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

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

attachEvent(eventType, handler)

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

detachEvent(eventType, handler)

参数说明:

• eventType指定事件类型(注意加on)

• handler是事件处理函数
  例子：

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

3.DOM2级模型

属于W3C标准模型，现代浏览器(除IE6-8之外的浏览器)都支持该模型。在该事件模型中，一次事件共有三个过程:

• 事件捕获阶段(capturing phase)。事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

• 事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。

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

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

addEventListener(eventType, handler, useCapture)

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

removeEventListener(eventType, handler, useCapture)

参数说明:

• eventType指定事件类型(不要加on)
• handler是事件处理函数
• useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false与IE浏览器保持一致。（默认false冒泡）

例子：

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);

4.DOM3级事件处理方式

DOM浏览器中可能发生的事件有很多种不同事件类型具有不同的信息DOM3级事件规定了一下几种事件

• UI事件当用户与页面上的元素交互时触发
• 焦点事件当元素获得或者失去焦点时触发
• 鼠标事件当用户通过鼠标在页面上执行操作时触发
• 滚轮事件当使用鼠标滚轮或类似设备时触发
• 文本事件当在文档中输入文本时触发
• 键盘事件当用户通过键盘在页面