js-JavaScript高级程序设计学习笔记8

第十三章 事件

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并需要把元素添加到文档后才会开始下载。