几个概念
- 什么是事件？
- 什么是事件流？
- 什么是事件代理？
事件
事件就是文档或者浏览器窗口中发生的特定的交互瞬间，如 onload,onclick,onmousedown…
事件流
DOM 即文档对象模型是一个树形结构，当一个 html 元素产生一个事件时，该事件会在元素节点以及根节点之间的路径传播，路径所经过的节点都会接收到该事件，这样的过程称之为 DOM 的事件流。
事件流的三个阶段：
- 捕获阶段：从不确定事件源到确定事件源依次向下响应
- 目标阶段：
- 冒泡阶段：从事件源向上响应
跨浏览器的事件处理程序:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function addEventHandle(element, eventType, handle) {
if (element.addEventListener) {
element.addEventListener(eventType, handle, false);
} else if (element.attachEvent) {
element.attachEvent(`on${eventType}`, handle);
} else {
element[`on${eventType}`] = handle;
}
}
function removeEventHandle(element, eventType, handle) {
if (element.removeEventListener) {
element.removeEventListener(eventType, hanle, false);
} else if (element.detachEvent) {
element.detachEvent(`on${eventType}`, handle);
} else {
element[`on${eventType}`] = null;
}
}
还有几个必要的属性
| 属性【只读】 | 描述 |
|---|---|
| bubbles | 表明事件是否冒泡 |
| cancelable | 表明是否可以取消事件的默认行为 |
| currentTarget | 某事件处理程序当前正在处理的那个元素 |
| defaultPrevented | 为true表明已经调用了preventDefault（DOM3新增） |
| eventPhase | 调用事件处理程序的阶段：1 捕获；2 处于阶段；3 冒泡阶段（这个属性的变化需要在断点中查看，不然你看到的总是0） |
| target | 事件目标（绑定事件那个dom） |
| trusted | true表明是系统的，false为开发人员自定义的（DOM3新增） |
| type | 事件类型 |
| view | 与事件关联的抽象视图，发生事件的window对象 |
| preventDefult | 取消事件默认行为，cancelable是true时可以使用 |
| stopPropagation | 取消事件捕获/冒泡，bubbles为true才能使用 |
| stopImmediatePropagation | 取消事件进一步冒泡，并且组织任何事件处理程序被调用（DOM3新增） |
事件代理
在父节点绑定事件监听，当触发子节点DOM元素事件后，利用事件流的原理来触发绑定在父节点上的事件。
