本文参考资料是：高级编程语言第三版（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>待更……
- HTML事件处理程序，用于事件处理程序同名的HTML特性设定。事件处理程序可以直接是要执行的动作，也可以是别处定义的脚本函数。
js事件、自定义dom事件、自定义事件
原文地址：http://www.cnblogs.com/yanyalun/p/7674686.html