这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战
事件对象
事件处理程序函数在处理事件时，或者说DOM在触发某个事件的时候，会产生一个包含事件相关信息的event事件对象，event 包含着所有与事件有关的信息。如导致事件的元素、事件的类型等。
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log(event.type);
}
可用的属性和方法：
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| bubbles | Boolean | 表明事件是否冒泡 |
| cancelable | Boolean | 表明是否可以取消事件的默认行为 |
| currentTarget | Element | 当前正在处理事件的那个元素 |
| defaultPrevented | Boolean | 为 true 表示已经调用了 preventDefault() |
| detail | Integer | 与事件相关的细节信息 |
| eventPhase | Integer | 调用事件处理程序的阶段；1：捕获阶段，2：处于目标，2：冒泡阶段 |
| preventDefault() | Function | 取消事件的默认行为 |
| stopPropagation() | Function | 取消事件的进一步捕获或冒泡 |
| target | Element | 事件的目标 |
| type | String | 被触发的事件类型 |
IE 的事件对象
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event) {
console.log(event.type);
});
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| cancelBubble | Boolean | 默认值为 false，为 true 时就是取消事件冒泡 |
| returnValue | Boolean | 默认值为 true，为 false 时取消事件的默认行为 |
| srcElement | Element | 事件的目标 |
| type | String | 被触发的事件类型 |
事件类型
事件类型有以下几类：
- UI 事件，当用户与页面上的元素交互时触发；比如：
load、unload、abort、error、select、resize、scroll； - 焦点事件，在页面元素获得或失去焦点时触发，比如：
blur、focus； - 鼠标事件，主要用于定位设备，比如：
click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseup； - 滚轮事件；
- 文本事件；
- 键盘事件，如：
keydown、keypress、keyup； - 合成事件；
事件委托
事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
<ul id="links">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
传统做法是3个 li 元素都要添加一个事件处理程序，这样会造成代码重复、臃肿。可以利用事件委托技术解决这个问题，使用事件委托，需要在 DOM 树中尽量最高的层次上添加一个事件处理程序。
var list = document.getElementById("links");
EventUtil.addHandler(list, "click", function(event) {
console.log(event);
});
参考《JavaScript高级程序设计》(第3版)P362 ~ P368、 P399 ~ P402
