读书笔记-Event对象

饥人谷_李栋

---

1.EventTarget接口
2.事件的传播
3.事件代理
4.事件属性

---

1.EventTarget接口

1.addEventListener() 定义一个特定事件的监听函数

target.addEventListener(名称,监听函数,false冒泡/true捕获)

注，1.为了便于兼容 false最好不要省
2.removeEventListener() 用来移除addEventListener方法添加的监听函数
注意，必须和addEventLisenter方法 参数完全一致，并且在同一个元素节点上

target.removeEventListener(名称，监听函数，false/true)

3.dispatchEvent() 在当前节点触发指定事件返回boolean值

target.dispatchEvent(event)

---

2.事件的传播

1.捕获阶段（红）：从window对象->目标节点
依次为：window、document、html、body、div
2.目标阶段（蓝）：目标节点上触发
3.冒泡阶段（绿）：从目标节点->window对象
依次为：div、body、html、document、window

---

3.事件的代理

把子节点的监听函数 定义到 父节点上

var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
   if (event.target.tagName.toLowerCase() === 'li') {
    // XXX
}
});

---

4.事件的属性

1.bubbles:事件是否冒泡
2.eventPhase:返回事件所处节点（int）
依次为0：没发生1：捕获2：目标3：冒泡
3.cancelable：事件是否可以取消
4.defaultPrevented：是否调用过preventDefault
5.currentTarget：返回 事件 当前所在的 节点
6.target：返回 触发事件 的节点
7.type：返回字符串
8.detail：返回 表示 事件性息 的数值
9.timeStamp：返回毫秒时间戳（chuo）
10.isTrusted:事件是否可以信任
11.preventDefault：取消事件默认行为
12.stopPropagation()：阻止再触发别的节点的监听函数
13.stopImmediatePropagation():阻止同一事件的其他监听函数被调用
注意，上文中，是否代表返回boolean值

---

具体内容参照阮一峰的JavaScirpt教程笔记
未完待续...