事件是用户或者浏览器自身执行的动作，而响应某个事件的函数就叫做事件处理程序或者叫事件侦听器。
定义事件处理程序可以大致分为以下三种：
一、html事件处理程序
元素支持的每种事件都可以用一个与之对应的事件处理程序的同名html特性来指定。
<input type="button" id="demo" onclick="alert(this.id)">
这种方式创建的事件处理程序，里面有包含一个局部变量event，就是事件对象，在这个函数内部this等于事件的目标元素。且这个函数扩展了其作用域，可以像访问局部变量一样访问document和该元素的本身的属性成员。
在html中指定事件处理程序的方式让html和js代码紧密耦合，不易维护。不推荐使用。
二、dom元素方法
通过js指定事件处理方式由来已久。方式就是将一个函数赋值给一个事件处理程序属性。
<div id="demo" class="hh">Web</div>
<script> var demo=document.getElementById("demo"); demo.onclick=function(){alert(this.className);} // alert(this.childNodes[0].nodeValue);输出web </script>
我们看到在上面的函数中可以通过this访问元素的任何属性和方法。
将事件处理程序属性的值设为null可以删除它。
demo.onclick=null;
三、addEventListener() / removeEventListener()方法
所有DOM都包含这二个方法，ie6-8 不支持这个方法。这个方法接受三个参数：要处理的事件名称，事件处理程序和一个表示事件捕获或者冒泡的布尔值。
<div id="demo" class="ppp">Web</div> <script> var demo=document.getElementById("demo"); demo.addEventListener("click",function(){alert(this.childNodes[0].nodeValue);},false);//false表示冒泡阶段调用函数 </script>
该方法好处是可以为元素添加多个事件处理程序：
<div id="demo" class="ppp">Web</div> <script> var demo=document.getElementById("demo"); demo.addEventListener("click",function(){alert(this.childNodes[0].nodeValue);},false); demo.addEventListener("click",function(){alert(this.className);},false); </script>
为div元素添加二个事件处理程序，点击后会按照添加的顺序依次弹出二条警示框。
通过为removeEventListener()方法提供与添加处理程序相同的参数可以删除事件处理程序。
function a(){alert(this.childNodes[0].nodeValue);};
demo.addEventListener("click",a,false);
demo.removeEventListener("click",a,false);
ie有它自己的事件处理程序方法：attachEvent()和detachEvent()。这个方法只接受二个参数，因为ie8之前只支持事件冒泡，所以没有像addEventListener()方法中的第三个参数。这二个参数分别是：事件处理程序名称和事件处理程序函数。
<div id="demo" class="ppp">Web</div> <script> var demo=document.getElementById("demo"); function a(){alert("hi");}; demo.attachEvent("onclick",a);//第一个参数是"onclick" 不是"click" </script>
ie以attachEvent()方法运行的方式与上面addEventListener()方法运行的主要区别是事件的处理程序的作用域不同。
在addEventListener()方法中程序是在所属的元素作用域中运行的；而ie的attachEvent()方法中程序是在全局作用域里运行的，它的this等于window。
事件对象
在触发DOM上的某个事件时会产生一个事件对象event，这个对象包含所有与事件有关的信息。包括鼠标点击的位置，键盘按下的键码、类型等等。
DOM事件对象event中包含的一些共有的属性和方法：
target：表示事件的目标。只读
type：表示事件触发的类型。只读
bubbles：表示事件是否冒泡。只读
cancelable：表示是否可以取消事件默认行为。只读
currentTarget：表示其事件监听器处理该事件的元素。
eventPhase：表示事件传播的当前阶段。（1表示捕获，2表示处于目标阶段，3表示冒泡）只读
preventDefault()方法：取消事件的默认行为。当cancelable值为true时可调用这个方法。只读
stopPropagation()方法：取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用。只读
在dom事件处理程序中this始终等于currentTarget的值；而target则包含事件的实际目标。如何将事件处理程序直接指定给目标元素则这三个值相等。
ie中的事件对象
ie中的event对象同样也包含与创建它的事件相关的属性和方法。
cancelBubble：表示是否取消事件冒泡，默认值为false。与上面DOM事件中的stopPropagation()方法作用相同。读写
returnValue：默认为true，设置为false表示取消事件的默认行为。与上面DOM事件中的preventDefalut()方法作用相同。读写
srcElement：表示事件的目标。与上面DOM事件中的targe属性作用相同。只读
type：表示事件的类型
ie中的event对象一般作为window对象的一个属性存在的，我们通过window.event来取得event对象。
事件类型
load事件：页面完全加载后在windows上触发；或图像完全加载后在<img>元素上触发。
unload事件：当页面完全卸载后在window上触发。
resize事件：当窗口发生大小变化时在window上触发。
scroll事件：滚动带有滚动条的元素中的内容的时候在该元素上触发。
select事件：当选择文本框中的一个或多个字符时触发。
blur事件：表示在元素失去焦点是触发。这个事件不会冒泡。
focus事件：表示在元素获得焦点时触发。也不会冒泡。
click事件：点击鼠标时触发。或者按下回车键触发。
dbclick事件：双击鼠标按钮时触发。
mouseover事件：鼠标移到元素上时触发。
mouseout事件：鼠标从元素上移出是触发。
mouedown事件：鼠标被按下时触发。
mousemove事件：鼠标在元素内部移动时重复地触发。
mouseup事件：释放鼠标按钮时触发。
clientX、clientY属性：鼠标事件中，这二个属性保存这鼠标位置的信息，他们的值分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。这二个值不包括页面滚动的距离。
pageX、pageY属性：这二个属性表示鼠标光标在页面中的位置，而非从视口的左边和顶部算起。有滚动的距离的话还会算上滚动距离，页面没有滚动的话，它的值和上面的clientX、clientY的值相等。
screenX 、screenY属性：鼠标指针相对于整个屏幕的水平和垂直坐标。
shiftkey、ctrlkey、altkey和metakey这四个属性分别表示键盘上Shift、Ctrl、Alt、Meta是否被按下。这些属性包含的都是布尔值，true表示被按下。
keydown事件：按下键盘任意键时触发。
keypress事件：按下键盘上的字符键时触发。
keyup事件：释放键盘上的键时触发。
上面的keydown、keyup事件在发生时，event对象的keyCode属性保存这键盘上一个特定的键上的一个代码，称为键码。
在使用removeChild()或者replaceChlid()方法从DOM中删除节点的时候首先会触发DOMNodeRemoved事件。这里的event.target引用的是被删除的节点，event.relatedNode引用的是目标节点的父节点。这个事件可以冒泡。紧接着触发的是DOMSubtreeModified事件。这个事件的目标是被移除节点的父节点。event不再提供事件的相关信息。
在使用appendChild()、replaceChild()或inserBefore()来向DOM中插入节点时首先会触发DOMNodeInserted事件。这个事件的目标是被插入的节点。而event.relatedNode引用的父节点。紧接着会在新插入的节点上触发DOMNodeInsertedIntoDocument事件，这个事件不冒泡。最后一个触发的是DOMSubtreeModified。触发于新插入节点的父节点。
hashchange事件：URL发生变化是调用，一般将它添加给window对象。