一、一个实例

假设你在你家客厅里玩游戏,口渴了,需要到厨房开一壶水,等水开了的时候,为了防止水熬干,你需要及时把火炉关掉。为了及时了解到水是否烧开,你有三种策略可以选择:

1. 守在厨房内,等水烧开

这种策略显然是很愚蠢的,采取这种策略,在烧水的过程中你将不能做任何事情,效率极低。

2. 呆在客厅玩游戏,每隔一两分钟跑到厨房看一次

这种策略,在计算机科学中称为轮询,即每隔一定的时间,监测一次。在这里,也是很不明智的,在玩游戏时需要不断的分心。

3. 在水壶上安装一个报警器,当水开了的时候,发出警报

这种策略是最好的,既不耽误自己玩游戏,又能在水开了的时候使自己及时获得通知。这种策略在计算机中通过事件机制来实现。

深入理解事件机制的实现-LMLPHP

二、事件机制的组成

通过上面的实例,我们可以抽象出一个事件机制有三个组成部分:

1.事件源:即事件的发送者,在上例中为水壶;

2.事件:事件源发出的一种信息或状态,比如上例的警报声,它代表着水开了;

3.事件侦听者:对事件作出反应的对象,比如上例中的你。在设计事件机制时一般把侦听者设计为一个函数,当事件发送时,调用此函数。比如上例中可以把倒水设计为侦听者。

深入理解事件机制的实现-LMLPHP

三、初步实现

可以使用面向对象设计中的组合模式,把事件侦听者当做事件源内部的一个对象,当事件发生时,调用侦听者即可:

1 事件源:水壶{
2     事件侦听者:你关火;//事件源持有事件侦听者
3
4     发送(事件:“水开了”){
5         你关火();
6     }
7 }

四、出现多个事件侦听者的情况

如果你和你女朋友都在客厅玩游戏,水开的时候应该谁去关火呢?假设精明(懒惰)的你,听到水开的警报声,马上假装上厕所,你女朋友只能无奈地去关火。这种情况下,水壶发出的警报声导致了两个反应:1.你上厕所,2.你女朋友去关火。此时我们要如何实现呢?我们依然可以采用上面的实现方案,再在事件源中添加一个事件侦听者:

 1 事件源:水壶{
 2     事件侦听者:你上厕所;
 3     事件侦听者:你女朋友关火;
 4
 5     发送(事件:“水开了”){
 6             你上厕所();
 7             你女朋友关火();
 8     }
 9
10 }

但这种设计有一个重大缺陷:事件源和事件侦听者过度耦合。所有侦听者都是硬编码入事件源中,在程序执行过程中无法更改,灵活性极差。比如,有一天你女朋友外出了,只能你去关火,那么上面的事件源就需要重新修改。我们可以采用下面的方法使事件源和事件侦听者解耦:

1.事件源中定义一个列表,比如数组,用来存储所有侦听者;

2.为列表留一个增删数据的接口,用来随时添加和删除侦听者;

3.当发送事件时,遍历并执行列表中的侦听者

实现如下:

 1 事件源:水壶{
 2
 3     事件侦听者:侦听者列表[];
 4
 5     添加事件侦听者(侦听者){
 6         侦听者列表加入侦听者
 7     }
 8     删除事件侦听者(侦听者){
 9         侦听者列表移除侦听者
10     }
11
12     发送(事件){
13       //遍历并执行列表中的侦听者
14       for(侦听者 in 侦听者列表){
15           执行侦听者
16       }
17   }
18
19 }

这种实现方案即为观察者设计模式,可以让侦听者预订事件。

五、事件源可发送多种事件的情况

假设你家的水壶有点智能,当水温达到90度的时候,会发出一个“水快开了”的警报,为你提前逃到厕所偷懒留出了充足的时间,这种情况下的事件和侦听者的对应关系如下:

深入理解事件机制的实现-LMLPHP

我们可以在添加和删除侦听者的时候,把事件类型和侦听者绑定成一个数组(或对象),再加入侦听者列表。在发送事件时,在列表中查找和当前事件绑定的侦听器执行:

事件源:水壶{

    事件侦听者:侦听者列表[];

    添加事件侦听者(事件类型,侦听者){
        带类型侦听者=[事件类型,侦听者];//通过数组把事件类型和侦听者绑定
        侦听者列表加入带类型侦听者;
    }
    删除事件侦听者(事件类型,侦听者){
        通过事件类型和侦听者查找列表中对应的侦听器删除;
    }

    发送(事件类型){
        //遍历并执行列表中的侦听者
        for(带类型侦听者 in 侦听者列表){
            if(带类型侦听者[0]==事件类型){
                    带类型侦听者[1]()//执行对应的侦听器
            }
        }
    }
}

把上面的文字描述翻译成伪码如下:

 1 //水壶类
 2 Kettle{
 3
 4     array:Listeners[];
 5
 6     addEventListener(eventType,listener){
 7         typeListener=[eventType,listener];//通过数组把事件类型和侦听者绑定
 8         Listeners.push(typeListener);
 9     }
10
11     removeEventListener(eventType,listener){
12         Listeners.delete([eventType,listener]);
13     }
14
15     dispatch(eventType){
16         //遍历并执行列表中的侦听者
17         for(typeListener in Listeners){
18             if(typeListener[0]==eventType){
19                 typeListener[1]()//执行对应的侦听器    
20             }
21         }
22     }
23
24 }
25
26 goWc(){
27     //你上厕所
28 }
29
30 turnOffFire(){
31     //女朋友关火
32 }
33
34 kettle=new Kettle();
35 //水壶注册水快开了事件
36 kettle.addEventListener("水快开了",goWC);
37 kettle.addEventListener("水开了",turnOffFire);
38 kettle.dispatch("水快开了");

优化:遵循"针对接口编程"的设计原则,应该为水壶、事件、侦听器设计一个基类,其他具体的类继承这些基类;

六、显示对象上的事件:理解事件流

当事件发生在显示对象上(比如浏览器)的时候,会遇到一个很有趣的问题:页面的那一部分会拥有某个特定的事件?比如当你点击页面上的一栋小房子的时候,根据视角的远近,你点击的对象会发生变化。从最远处来看你点击的是页面,镜头拉近你点击的是小房子,再拉近你点击的是房子上的一面墙,再拉近你点击的是墙上的一块砖。也就是说,你点击一次页面也许会有很多显示对象发生了点击事件,如果你在每一个显示对象上都绑定了点击处理程序,那么这些程序都会执行。这里会遇到一个问题:这些程序按什么顺序执行。这取决于显示对象接受到点击事件的顺序,一般有两种模式:事件冒泡和事件捕获。这种事件在显示对象上按顺序发生的过程称为事件流。

1. 事件冒泡

事件冒泡,即事件开始时由最具体的元素(比如上例的砖块)接受,然后逐级向上传播到较为不具体的节点(文档);

2. 事件捕获

事件捕获的思想是不太具体的元素(文档)更早的接受事件,而最具体的元素最后接受到事件(砖块)。事件捕获的用意在于事件到达预订目标之间捕获它。
深入理解事件机制的实现-LMLPHP

在JavaScript中为DOM中的元素添加事件处理程序时,有三个参数,其中第三个参数是一个布尔值,当为true时,表示在捕获阶段调用事件处理程序,为false时,表示在冒泡阶段调用事件处理程序,举例如下:

 1 <body>
 2     <div id="outer">
 3         <div id="inner" >
 4         </div>
 5     </div>
 6 </body>
 7
 8 //例一
 9 var btn1=document.getElementById("outer");
10 btn1.addEventListener("click",function(){
11     alert('outer')
12 },false);
13
14 var btn2=document.getElementById("inner");
15 btn2.addEventListener("click",function(){
16     alert('inner')
17 },false);
18
19 //例二
20 var btn1=document.getElementById("outer");
21 btn1.addEventListener("click",function(){
22     alert('outer')
23 },false);
24
25 var btn2=document.getElementById("inner");
26 btn2.addEventListener("click",function(){
27     alert('inner')
28 },false);    

上面例一的事件处理程序都发生在冒泡阶段,所以会先输出inner,再输出outer。例二中id为outer元素上的事件处理程序发生在捕获阶段,所以会先输出outer,再输出inner。

注意:事件流发生在父元素和子元素之间,而不是两个同级的元素。

05-18 01:11