事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一，深入理解事件的工作机制以及它们对性能的影响至关重要。本文将详细介绍JavaScript的事件机制，并对比分析了浏览器之间的不同，具体内容包括事件流、事件处理程序绑定方式、事件对象
JavaScript与HTML之间的交互就是通过事件实现的。
事件：用户或浏览器自身执行的某种动作，换言之，文档或浏览器发生的一些特定的交互瞬间。
事件处理程序：又称事件侦听器，事件发生时执行的代码段。
事件流描述的是从页面中接收事件的顺序
IE9、Safari、Chrome、Opera、Firefox都是从window对象开始捕获，冒泡到window对象
同时支持 两种基本事件模型，规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
DOM事件处理程序绑定时，程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡。
IE只支持事件冒泡，不支持事件捕获。
事件处理程序属性名为“on”+事件名
程序作用域为元素的作用域，this指向元素本身
方法一：将函数值赋给一个事件处理程序属性。如下
var btn=document.getElementById("myBtn"); btn.onclick=function{ //具体代码段 }此种方法只能添加一个事件处理程序
方法一：通过addEventListener方法。如下
addEventListener("事件名"，事件处理程序，ture/false:在事件捕获/冒泡阶段调用模型)对应的事件处理程序移除方法：removeEventListener，参数必须相同。
注意：此种方法，以匿名函数添加的事件处理程序无法被移除
此方法可以添加多个事件处理程序
IE+Oprea浏览器
程序作用域为全局作用域，this指向window对象
添加方法：attachEvent("on+事件名"，事件处理程序)
移除方法：detachEvent("on+事件名"，事件处理程序)
在触发某个事件时，会产生一个相应的事件对象，这个对象包含所有与事件相关的信息。如：导致事件的元素、事件的类型等
构造EventUtil对象，为其添加可兼容各浏览器的事件处理方法
<script> var EventUtil = { //添加事件处理程序// addHandler: function(element, type, handler) { if(element.addEventListener) { addEventListener(type, handler, false); } else if(element.attachEvent) { attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, //移除事件处理程序// removeHandler:function(element,type,handler){ if(element.removeEventListener){ removeEventListener(type,handler,false); }else if(element.detachEvent){ detachEvent("on"+type,handler); }else{ element["on"+type]=null; } }, //获得事件对象// getEvent:function(event){ return event ? event : window.event; }, //获得事件的目标// getTarget:function(event){ return event.target || event.scrElement; }, //取消事件的默认行为// preventDefault:function(event){ if(event.preventDefault){ event.preventDefault; }else{ event.returValue=false; } }, //阻止事件进一步冒泡// stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation; }else{ event.cancelBubble=true; } } } </script>
原文：http://www.cnblogs.com/xie-zhan/p/6414402.html