|
|
|
|
移动端

2.3.3 处理事件

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

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

技术沙龙 | 邀您于8月25日与国美/AWS/转转三位专家共同探讨小程序电商实战

2.3.3 处理事件

事件处理背后的的主要思想是:当事件发生时,浏览器调用相应的事件处理器。如前面提到的,由于单线程执行模型,所以同一时刻只能处理一个事件。任何后面的事件都只能在当前事件处理器完全结束执行后才能被处理!

让我们回到清单2.1中的应用。图2.9展示了在用户快速移动和单击鼠标时的执行情况。

让我们看看这里发生了什么。为了响应用户的动作,浏览器把鼠标移动和单击事件以它们发生的次序放入事件队列:第一个是鼠标移动事件,第二个是单击事件序号1。

在事件处理阶段中,事件循环会检查队列,其发现队列的前面有一个鼠标移动事件,然后执行了相应的事件处理器序号2。当鼠标移动事件处理器处理完毕后,轮到了等待在队列中的单击事件。当鼠标移动事件处理器函数的最后一行代码执行完毕后,JavaScript引擎退出事件处理器函数,鼠标移动事件完整地处理了序号3,事件循环再次检查队列。这一次,在队列的最前面,事件循环发现了鼠标单击事件并处理了该事件。一旦单击处理器执行完成,队列中不再有新的事件,事件循环就会继续循环,等待处理新到来的事件。这个循环会一直执行到用户关闭了Web应用。

现在我们有了个总体的认识,理解了事件处理阶段的所有步骤。让我们看看这个过程是如何影响DOM的(如图2.10所示)。执行鼠标移动处理器时会选择第二个列表元素,其ID为second。

然后通过使用addMessage,使用文字“Event: mousemove”添加了一个新的列表项元素序号1。一旦鼠标移动处理器结束后,事件循环执行单击事件处理器,从而创建了另一个列表元素序号2,并附加在ID为second的第二个列表元素后。

对Web应用客户端的生命周期有了清晰的理解后,本书的下一部分,我们会开始聚焦于JavaScript语言,理清函数的来龙去脉。


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

51CTO读书频道二维码


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

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

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

读 书 +更多

安全模式:J2EE、Web服务和身份管理最佳实践与策

本书全面阐述Java应用安全的基本知识并介绍一种强大的结构化安全设计方法;介绍独立于厂商的安全架构;列出详细的评估核对表以及23种经过实...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊