事件指的是使用者或者浏览器自身执行的某种动作（比如点击事件）。响应这些事件的函数就叫做事件处理程序（或者叫事件监听器）。事件处理程序的名字以“on”为前缀，比如 click 事件的事件处理程序就是 onclick。
1 HTML 事件处理程序
如果某个元素支持某个事件，那么它都有一个与相应的事件处理程序同名的 HTML 属性，我们可以通过这个属性来指定 JS：
<input type="button" value="点我"/>
因为这里的脚本是嵌入在 HTML 元素的属性中，所以使用了单引号！
也可以调用在页面的其他地方定义的脚本：
<input type="button" value="Click me"> <script type="text/javascript"> function showMessage() { console.log("Hello World!"); } </script>
事件处理程序的代码在执行时，可以访问到全局作用域中的任何代码！
这样指定的事件处理程序，会创建一个封装着元素属性值的函数，它有一个局部变量 event，就是事件对象：
<input type="button" value="点我"/>
通过 event 变量，可以直接访问事件对象。在这个函数内部，this 值等于事件的目标元素：
<input type="button" value="点我"/>
可以通过这个动态创建的函数，来扩展它的作用域。在这个函数内部，可以访问 document 以及该元素本身的成员，这个函数是像这样使用 with 来扩展作用域的：
function(){ with(document){ with(this){ //元素属性值 } } }
所以，在事件处理程序中，要访问自己的属性就变得很容易啦 O(∩_∩)O~：
<!-- 输出 “点我” --> <input type="button" value="点我"/>
如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口，所以这个函数应该是这样的：
function(){ with(document){ with(this.form){ with(this){ //元素属性值 } } } }
这样事件处理程序就无需引用表单元素，就可以直接访问到表单中的其他字段啦O(∩_∩)O~：
<form method="post"> <input type="text" value=""> <input type="button" value="Echo Usernmame"> </form>
在 HTML 中直接指定事件处理程序会有这些缺点：
时差问题——假设函数是定义在页面最底部，如果用户在页面还未解析到这个函数时，就点击了按钮，就会引发错误。所以很多 HTML 事件处理程序都会被封装在 try-catch 块中：
<input type="button" value="点我"/>
扩展事件处理程序的作用域链，在不同的浏览器中结果可能会不同。
HTML 与 JavaScript 代码紧密耦合。要修改事件处理程序，就需要修改两个地方，所以很多开发人员转而使用 JavaScript 来指定事件处理程序。
2 DOM0 级事件处理程序
它是通过将一个函数赋值给事件处理程序的属性，来指定事件处理程序的。要使用这种方法，必须先取得一个要操作的对象的引用。
每个元素（包括 window 和 document） 都有自己的事件处理程序属性，它们通常是小写，比如 onclick。将属性的值设置为函数，就指定了事件处理程序。
DOM0 级事件处理程序是元素的方法，它是在元素的作用域内运行的，因此程序中的 this 引用的是当前元素：
<button>点我</button> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { console.log(this.id);//myBtn } </script>
可以通过 this 访问元素的任何属性和方法。DOM0 级事件处理程序会在事件流的冒泡阶段被处理。
也可以像这样删除这样指定的事件处理程序：
btn.onclick = null; //删除指定的事件处理程序
注意： 如果使用的是 HTML 指定的事件处理程序，那么 onclick 属性的值就是一个包含着在同名 HTML 特性中指定的代码函数。将相应的属性设置为 null，也可以删除以这种方式指定的事件处理程序。
3 DOM2 级事件处理程序
addEventListener()：指定事件处理程序。
removeEventListener()：删除事件处理程序。
所有的 DOM 节点都包含这两个方法。它们都接受 3 个参数：要处理的事件名、事件处理程序函数、布尔值。最后一个参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
DOM2 级事件处理程序可以很方便地添加多个事件处理程序：
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { console.log(this.id); }, false); btn.addEventListener("click", function () { console.log("Hello world!"); }, false);
这些事件处理程序会按照添加它们的顺序依序触发。