|
|
51CTO旗下网站
|
|
移动端

2.3.1 事件处理器概览

《JavaScript忍者秘籍(第2版)》第2章运行时的页面构建过程,本章会完整探索客户端Web应用程序的生命周期,从页面请求开始,到用户不同种类的交互,最后至页面被关闭。本节为事件处理器概览。

作者:一心一译前端小组 译来源:人民邮电出版社|2018-03-06 14:37

2.3 事件处理

客户端Web 应用是一种GUI应用,也就是说这种应用会对不同类型的事件作响应,如鼠标移动、单击和键盘按压等。因此,在页面构建阶段执行的JavaScript代码,除了会影响全局应用状态和修改DOM外,还会注册事件监听器(或处理器)。这类监听器会在事件发生时,由浏览器调用执行。有了这些事件处理器,我们的应用也就有了交互能力。在详细探讨注册事件处理器之前,让我们先从头到尾看一遍事件处理器的总体  思想。

2.3.1 事件处理器概览

浏览器执行环境的核心思想基于:同一时刻只能执行一个代码片段,即所谓的单线程执行模型。想象一下在银行柜台前排队,每个人进入一支队伍等待叫号并“处理”。但JavaScript则只开启了一个营业柜台!每当轮到某个顾客时(某个事件),只能处理该位顾客。

你所需要的仅仅是一个在营业柜台(所有人都在这个柜台排队!)的职员为你处理工作,帮你订制全年的财务计划。当一个事件抵达后,浏览器需要执行相应的事件处理函数。这里不保证用户总会极富耐心地等待很长时间,直到下一个事件触发。所以,浏览器需要一种方式来跟踪已经发生但尚未处理的事件。为实现这个目标,浏览器使用了事件队列,如图2.8所示。

所有已生成的事件(无论是用户生成的,例如鼠标移动或键盘按压,还是服务器生成的,例如Ajax事件)都会放在同一个事件队列中,以它们被浏览器检测到的顺序排列。如图2.8的中部所示,事件处理的过程可以描述为一个简单的流程图。

浏览器检查事件队列头;

如果浏览器没有在队列中检测到事件,则继续检查;

如果浏览器在队列头中检测到了事件,则取出该事件并执行相应的事件处理器(如果存在)。在这个过程中,余下的事件在事件队列中耐心等待,直到轮到它们被处理。

由于一次只能处理一个事件,所以我们必须格外注意处理所有事件的总时间。执行需要花费大量时间执行的事件处理函数会导致Web应用无响应!(如果听起来还不太明确,不要担心,第13章中我们还会学习事件循环,再看看它是如何损害Web应用在感受上的性能的)。

重点注意浏览器在这个过程中的机制,其放置事件的队列是在页面构建阶段和事件处理阶段以外的。这个过程对于决定事件何时发生并将其推入事件队列很重要,这个过程不会参与事件处理线程。

事件是异步的

事件可能会以难以预计的时间和顺序发生(强制用户以某个顺序按键或单击是非常奇怪的)。我们对事件的处理,以及处理函数的调用是异步的。如下类型的事件会在其他类型事件中发生。

浏览器事件,例如当页面加载完成后或无法加载时;

网络事件,例如来自服务器的响应(Ajax事件和服务器端事件);

用户事件,例如鼠标单击、鼠标移动和键盘事件;

计时器事件,当timeout时间到期或又触发了一次时间间隔。

Web应用的JavaScript代码中,大部分内容都是对上述事件的处理!

事件处理的概念是Web应用的核心,你在本书中的例子会反复看到:代码的提前建立是为了在之后的某个时间点执行。除了全局代码,页面中的大部分代码都将作为某个事件的结果执行。

在事件能被处理之前,代码必须要告知浏览器我们要处理特定事件。接下来看看如何注册事件处理器。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

SOA概念、技术与设计

在本书中,Thomas ERL呈现了第一部端对端的教程,提供了从基层开始的面向服务的建模与设计的逐步指导。通过逐步的、清晰生动的、良好的SOA...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊