事件是用户或浏览器自身执行的某种动作，如click、load，这些是事件的名字。响应某个事件的函数叫做事件处理程序，事件处理程序的名字以“on”开头。
为事件指定处理程序的方式有以下几种：
使用一个与相应事件处理程序同名的HTML特性来指定，也就是说事件直接加在HTML元素上。 1、可以在HTML中定义的事件处理程序包含要执行的具体动作，例如
<input type="button" value="点击" onclick="alert('clicked')" />2、可以调用在页面其他地方定义的脚本，例如：
<script type="text/javascript"> function showMessage(){ alert("clicked"); } </script> <input type="button" value="点击" onclick="showMessage()" />这样指定事件处理程序，会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event。通过event变量可以直接访问事件本身，比如οnclick=”alert(event.type)”会弹出click事件。
缺点：HTML与JavaScript紧密耦合，修改的时候要修改HTML和JavaScript两部分
将一个函数赋值给一个事件处理程序属性。
每个元素都有自己的事件处理程序属性，例如onclick。将这个属性设置为一个函数，就可以指定事件处理程序，例如：
<input type="button" value="点击" id="myBtn"> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { alert("clicked"); } </script>使用此种方法定义的事件处理程序被认为是元素的方法，程序中的this引用当前元素。例如下边结果会弹出“myBtn”。
<input type="button" value="点击" id="myBtn"> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { alert(this.id); } </script>注意：DOM0级事件处理程序对每个时间只支持一个事件处理程序。
定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。
所有的DOM节点中都包含这两个方法。 两个方法都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值为true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用。例如：
<input type="button" id="myBtn" value="Click Me" /> <p>This example won't work in Internet Explorer8.</p> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert(this.id); //"myBtn" }, false); btn.addEventListener("click", function(){ alert("Hello world!"); }, false); </script>这里为按钮添加了两个事件处理程序，按照它们的顺序触发。
通过addEventListener添加的事件处理程序必须通过removeEventListener删除，删除时传入的参数必须与添加时一致。通过addEventListener添加的匿名函数将无法删除。例如，下边这段代码中removeEventListener不起作用
<input type="button" id="myBtn" value="Click Me" /> <input type="button" id="myRemoveBtn" value="Remove Event Handler" /> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert(this.id); },false); var removeBtn = document.getElementById("myRemoveBtn"); removeBtn.removeEventListener("click",function(){ alert(this.id); },false); </script>这样写起作用：
<input type="button" id="myBtn" value="Click Me" /> <input type="button" id="myRemoveBtn" value="Remove Event Handler" /> <script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function(){ alert(this.id); }; btn.addEventListener("click", handler, false); var removeBtn = document.getElementById("myRemoveBtn"); removeBtn.onclick = function(){ btn.removeEventListener("click", handler, false); //works! }; </script>注意：IE8及以下版本不支持addEventListener，IE9和IE10支持addEventListener，IE11只支持addEventListener
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。
这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。 注意： 1、这里的参数是事件处理程序名称而不是事件名称，所以要加上on。 2、在这种方法下，事件处理程序会在全局作用域中运行，this等于window。 3、为同一个按钮添加两个事件处理程序时，IE8及以下版本和DOM中事件触发顺序相反，IE9及以上版本浏览器和DOM中事件触发顺序相同。例如：
<input type="button" id="myBtn" value="Click Me" /> <p>This example works only in Internet Explorer.</p> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(){ alert("Clicked"); }); btn.attachEvent("onclick", function(){ alert("Hello world!"); }); </script>这段代码在IE8及以下版本运行先弹出”Hello world!”，再弹出”Clicked”。在IE9及以上版本运行先弹出”Clicked”，再弹出”Hello world!”。
使用attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。和DOM方法一样，添加的匿名函数将无法删除。
