本文参考资料是：高级编程语言第三版（13章事件和22章自定义事件）。
本文涉及到：
- 事件的组成元素、
- 事件优化、
- 模拟事件、
- 自定义事件的内容
js事件是什么？高级程序13章第一句话说：js与html之间的交互是通过事件实现的。事件是浏览器或者用户自身执行的某种动作，例如我们最常用到的点击事件。
1：js事件
- 事件流
- 事件处理程序
- 事件对象
- 事件类型
- 事件流：从页面上接收事件的顺序
- 事件冒泡：概念事件从最具体的元素接收事件，然后逐级向上传播到较为不具体的元素。这个概念是由ie提出。
<!DOCTYPE html> <html> <head> <title>测试事件流的页面</title> <meta charset="utf-8" /> <script type="text/javascript"> </script> </head> <body> <div> 测试 </div> </body> </html>
页面1-1
以页面1-1为例，如果点击了div，那么click事件会按照div < body < html <document的顺序传播。
现在浏览器都已经支持事件冒泡，在IE5.5及更早版本中的事件冒泡会跳过html，直接由body到document。 - 事件捕获：事件由最不具体的元素接收，而最具体的元素最后接收。由Netscape Communicator团队提出
以页面1-1为例，如果点击了div，那么click事件将按照document < html < body < div的顺序传播。
由于老版本浏览器不支持，因此很少有人使用事件捕获。 - DOM事件流：“DOM2级事件”规定的事件流分为三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
以页面1-1为例，点击div会发生如下三个阶段：
1.事件捕获阶段：document < html < body < (div)
2.处于目标阶段：div
3.事件冒泡阶段：(div) < body < html <document
当事件到达“处于目标阶段”时，事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。
“DOM2级事件”明确规定：要求捕获阶段不会涉及事件目标，但是IE9+，Safari，Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。
所以，有两个机会在目标对象上面操作对象。 -
实例：测试上面所说的事件冒泡和事件捕获。直接使用的vue-clic创建的项目，所以测试代码是vue所写：
<template> <div id="app"> test </div> </template> <script> import {addEvent} from "./scripts/test"; export default { name: 'app', data () { return { } }, mounted() { this.test(); }, methods: { callback(event) { event = event || window.event; console.log(event.currentTarget.tagName + " is " + event.type + "ing") }, test() { var div = document.getElementById("app"), body = document.body || document.documentElement, type = "click", tag = false; addEvent(div, type, this.callback, tag); addEvent(body, type, this.callback, tag); } } } </script>
/** * * @param {*} dom 元素 * @param {*} type 类型 * @param {*} fun 回调函数 * @param {*} tag 捕获/冒泡 */ export function addEvent(dom, type, fun, tag) { dom.addEventListener(type, fun, tag); }当tag是false（冒泡阶段）时，控制台输出如下：
当tag是true（捕获阶段）时，控制台输出如下：
- 事件冒泡：概念事件从最具体的元素接收事件，然后逐级向上传播到较为不具体的元素。这个概念是由ie提出。
- 事件处理程序（事件侦听器）：响应某个事件的函数。像click、load等是事件的名称，而事件处理程序的名称则是："on" + 事件名称，比如onclick、onload等等
添加事件处理器有如下几种方式： - HTML事件处理程序，用于事件处理程序同名的HTML特性设定。事件处理程序可以直接是要执行的动作，也可以是别处定义的脚本函数。
<div onclick="alert(1)"> 测试 </div>
- DOM0级事件处理程序（后添加的会覆盖新添加的事件）
<div id="test"> 测试 </div> <script type="text/javascript"> var test = document.getElementById("test"); test.onclick = function () { alert(1); } </script>
- DOM2级事件处理程序（可以为同一元素绑定多个事件，事件执行顺序：先添加的先执行）
<div id="test"> 测试 </div> <script type="text/javascript"> var test = document.getElementById("test"); test.addEventListener("click", function () { alert(1); }, false); </script>
- IE事件处理程序（注意：通过attachEvent指定的事件处理程序的作用域指向的是全局作用域，this指向window，而其他的都是指向的绑定事件的对象，仅局限在所属元素的作用域。）（可以为同一元素绑定多个事件，事件执行顺序：先添加的后执行）
<div id="test"> 测试 </div> <script type="text/javascript"> var test = document.getElementById("test"); test.attachEvent("click", function () { alert(this === window); }); </script>
- 事件对象（触发DOM的某个事件时，会产生一个事件对象，即我们常用到的event，event对象中包含着所有与事件相关的信息），下面列举一下event属性和方法，并详细说明一下几个经常用到的属性和方法【标红】
- bubbles -> Boolean->只读-----> 表明事件是否冒泡
- cancelable-> Boolean->只读-----> 表明是否可以取消事件的默认行为
- currentTarget-> Element->只读-----> 表明是否可以取消事件的默认行为
- defaultPrevented-> Boolean->只读-----> 为true表示已经调用了preventDefault()（DOM3级事件新增）
- detail->Integer->只读-----> 与事件相关的详细信息
- eventPhase->Integer->只读----->调用事件处理程序的阶段：1表示捕获阶段；2表示“处于目标”；3表示冒泡阶段
- preventDefault()->Function->只读----->取消事件的默认行为。如果cancelable为true，则可以使用这个方法
- stopImmediatePropagation()->Function->只读----->取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件新增）
- stopPropagation()->Function->只读----->取消事件的进一步捕获或者冒泡。如果bubbles为true，则可以使用这个方法
- target->Element->只读----->事件的目标
- trusted->Boolean->只读----->为true表示事件是浏览器生成的，为false表示有开发人员通过js创建（DOM3级事件新增）
- type->String->只读----->被触发的事件类型
- view->AbstractVIew->只读----->与事件关联的抽象视图。等同于发生事件的window对象
只有在事件处理程序执行期间，event对象才存在；一旦处理程序执行完毕，event对象也会被销毁。
ie中的事件对象的访问与dom中的event的访问不同。里面的属性与方法也与dom中的有所不同。具体如下 - cancelBubble->Boolean->读/写->默认为false，将其设置为true可取消事件冒泡（与dom中的stopPropagation()方法作用相同）
- returnValue->Boolean->读/写->默认为true，将其设置为false就可取消事件的默认行为（与dom中的preventDefault()方法作用相同）
- srcElement->Boolean->只读->事件的目标（与dom中的target相同）
- 事件类型
- ui事件
- 焦点事件
- 鼠标事件
- 滚轮事件
- 文本事件
- 键盘事件
- 合成事件
- 变动事件
- 变动名称事件
待定