您的位置：首页 > 其它

深入理解事件机制的实现

2019-05-17 14:50 519 查看

一、一个实例

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

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

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

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

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

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

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

二、事件机制的组成

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

1.事件源：即事件的发送者，在上例中为水壶；

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

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

三、初步实现

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

事件源：水壶{
事件侦听者：你关火；//事件源持有事件侦听者

发送（事件：“水开了”）{
你关火（）；
}
}

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

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

事件源：水壶{
事件侦听者：你上厕所；
事件侦听者：你女朋友关火；

发送（事件：“水开了”）{
你上厕所（）；
你女朋友关火（）；
}

}

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

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

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

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

实现如下：

事件源：水壶{

事件侦听者：侦听者列表[]；

添加事件侦听者(侦听者){
侦听者列表加入侦听者
}
删除事件侦听者(侦听者){
侦听者列表移除侦听者
}

发送（事件）{
　　//遍历并执行列表中的侦听者
　　for(侦听者 in 侦听者列表){
　　执行侦听者
　　}
　　}

}

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

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

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

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

事件源：水壶{

事件侦听者：侦听者列表[]；

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

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

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

//水壶类
Kettle{

array:Listeners[]；

addEventListener(eventType，listener){
typeListener=[eventType，listener];//通过数组把事件类型和侦听者绑定
Listeners.push(typeListener);
}

removeEventListener(eventType，listener){
Listeners.delete([eventType，listener]);
}

dispatch（eventType）{
//遍历并执行列表中的侦听者
for(typeListener in Listeners){
if(typeListener[0]==eventType){
typeListener[1]()//执行对应的侦听器
}
}
}

}

goWc(){
//你上厕所
}

turnOffFire(){
//女朋友关火
}

kettle=new Kettle();
//水壶注册水快开了事件
kettle.addEventListener("水快开了"，goWC);
kettle.addEventListener("水开了"，turnOffFire);
kettle.dispatch("水快开了");

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

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

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

1. 事件冒泡

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

2. 事件捕获

事件捕获的思想是不太具体的元素(文档)更早的接受事件，而最具体的元素最后接受到事件(砖块)。事件捕获的用意在于事件到达预订目标之间捕获它。

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

<body>
<div id="outer">
<div id="inner" >
</div>
</div>
</body>

//例一
var btn1=document.getElementById("outer");
btn1.addEventListener("click",function(){
alert('outer')
},false);

var btn2=document.getElementById("inner");
btn2.addEventListener("click",function(){
alert('inner')
},false);

//例二
var btn1=document.getElementById("outer");
btn1.addEventListener("click",function(){
alert('outer')
},false);

var btn2=document.getElementById("inner");
btn2.addEventListener("click",function(){
alert('inner')
},false);

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航