事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM支持大量的事件。
DOM事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。
该接口主要提供三个实例方法：
addEventListener:绑定事件的监听函数；
removeEventListener：移除事件的监听函数；
dispatchEvent：触发事件；
EventTarget.addEventListener()
用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。
target.addEventListener(type, listener[, useCapture]);
type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。
下面是一个示例：
function hello(){
console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello,false);
监听函数
浏览器的时间模型就是通过监听函数（listener）对事件做出反应。
事件发生后，浏览器监听到了这件事，就会执行对应的监听函数。
这是事件驱动编程模式（event-driven）的主要编程方式。
JavaScript有三种方法，可以为事件绑定监听函数。
方法一：HTML的on-属性（不好）
HTML语言允许在元素的属性中，直接定义某些事件的监听代码。
<body onload="doSomething()">
<div onclick="console.log('触发事件')">
上面代码为body节点的load事件，
div节点的click事件，指定了监听代码，一旦事件发生，就会执行这段代码。
元素的事件监听属性，都是on加上事件名，比如onload就是on+load，表示load事件的监听代码。
注意，这些属性的值是将会执行的代码，而不是一个函数。
一旦指定的事件发生，on—属性的值是原样传入JavaScript引擎执行。因此如果要执行函数，不要忘记加上一对圆括号。
<!-- 正确 -->
<body onload="doSomething()">
<!-- 错误 -->
<body onload="doSomething">
双层click事件
<div onclick="console.log(2)">
<button onclick="console.log(1)">点击</button>
</div>
上面代码中，是
的click事件，也会触发
所以点击结果是先输出1，再输出2，即事件从子元素开始冒泡到父元素。
直接设置on-属性，与通过元素节点的setAttribute方法设置on-属性，效果是一样的。
el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element onclick="doSomething()">
