第十三章 事件
1、DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
2、大部分浏览器都会在捕获阶段出发对象上的事件，结果就是，有两个机会在目标对象上面操作事件。
3、事件是用户或浏览器自身执行的某种动作，比如click、load、mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以on开头，如onclick。
4、HTML事件处理程序不推荐使用，HTML和JS代码紧密耦合，不方便维护。
5、DOM0级事件处理程序——通过JS指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。如btn.onclick=function(){//代码};可被认为是元素的方法，是在元素的作用域中运行，程序中this引用当前元素。
6、DOM2级事件处理程序定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。接收三个参数，要处理的事件名（click，没有on，因为是事件名称）、作为事件处理程序的函数和一个布尔值。布尔值为true时表示在捕获阶段调用，false表示在冒泡阶段调用。DOM2级方法添加事件的主要好处时可以添加多个事件处理程序，会按照添加顺序触发。通过addEventListener（）添加的事件处理程序只能通过removeEventListener（）来移除，匿名函数无法移除。
7、IE事件处理程序，两个方法：attachEvent（）和detachEvent（）。接收两个参数：事件处理程序名称（onclick，有on，因为是事件处理程序名称）和事件处理程序函数。这个方法作用域是全局作用域，this等于window。可以添加多个事件，但是执行顺序与添加顺序相反！
8、DOM0级对每个事件只支持一个事件处理程序。强行对一个元素绑定两个相同事件，只会执行最后一个事件。在这里相当于给一个元素设置了一个属性，这个属性只能有一个值，比如onmouseover属性，它的值是某个函数的引用，再次绑定mouseover事件后，这个值将会被覆盖。
9、跨浏览器的事件对象的信息和方法——EventUtil对象。
1 var EventUtil={ 2 //添加事件处理程序 3 addHandler:function(element,type,handler){ 4 if(element.addEventListener){ 5 element.addEventListener(type,handler,false); 6 }else if(element.attachEvent){ 7 element.attachEvent("on"+type,handler); 8 }else{ 9 element["on"+type]=handler; 10 } 11 }, 12 //删除事件处理程序 13 removeHandler:function(element,type,handler){ 14 if(element.removeEventListener){ 15 element.removeEventListener(type,handler,false); 16 }else if(element.detachEvent){ 17 element.detachEvent("on"+type,handler); 18 }else{ 19 element["on"+type]=null; 20 } 21 }, 22 //获取event对象 23 getEvent:function(event){ 24 return event?event:window.event; 25 }, 26 //返回事件的目标 27 getTarget:function(event){ 28 return event.target||event.srcElement; 29 }, 30 //取消事件的默认行为 31 preventDefault:function(event){ 32 if(event.preventDefault){ 33 event.preventDefault(); 34 }else{ 35 event.returnValue=false; 36 } 37 }, 38 //阻止事件流 39 stopPropagation:function(event){ 40 if(event.stopPropagation){ 41 event.stopPropagation(); 42 }else{ 43 event.cancelBubble=true; 44 } 45 } 46 }
10、采用图像预先加载时，若要在图像加载完指定事件处理程序，则需要先绑定事件，再设置src属性。新图像在设置了src后立即开始下载。所以事件要放在设置src语句前，防止图片加载过快（缓存），事件若在src语句后，则不会触发onload。
11、<script>和<link>加载js和样式表的时候，事件和指定src（href）的语句前后无所谓，因为指定src并需要把元素添加到文档后才会开始下载。