深入学习SAP UI5框架代码系列之三：HTML原生事件 VS UI5 Semantic事件

这是Jerry 2020年的第80篇文章，也是汪子熙公众号总共第262篇原创文章。

系列目录

(0) SAP UI5应用开发人员了解UI5框架代码的意义

(1) UI5 module懒加载机制

(2) UI5 控件渲染机制

(3) HTML原生事件 VS SAP UI5 Semantic事件(本文)

(4) UI5控件元数据实现细节

(5) UI5控件的实例数据实现细节

(6) UI5控件数据绑定的实现原理

(7) UI5控件数据绑定的三种模式：One Way，Two Way和OneTime实现原理比较

(8) UI5控件ID的生成逻辑

(9) UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理

(10) XML视图里的button控件

(11) button控件和它背后的DOM元素

本文将讨论SAP UI5控件的事件处理，全文会围绕下图表现出的差异来阐述。

首先用一个简单的例子来回顾HTML原生事件处理原理。

有这样一个简单的HTML页面，里面使用了一个HTML原生button标签，通过onclick="copyText"注册了一个名为copyText的事件处理函数。

点击按钮之后，响应函数copyText将Field1的值拷贝到Field2去。这个通过onclick注册的事件处理函数，在Chrome开发者工具里可以直接查看。

除了onclick之外，调用浏览器原生的addEventListener方法也能给DOM元素注册事件。

在企业级web应用里，DOM树的结构通常都不简单。例如仅仅包含一个简单button控件的SAP UI5应用，页面渲染出来后也会自动生成5个div标签：

如果每个需要响应事件的控件，都使用onclick或者addEventListener给DOM元素注册一个事件处理函数，随着DOM事件处理函数数量的增加，web应用的性能会降低。因此SAP UI5引入了另一种所谓Semantic(语义)事件的概念，来完成UI5控件的事件注册和响应工作。

使用Jerry文章一个用于SAP UI5学习的脚手架应用，没有任何后台API的依赖提到的脚手架，开发一个只包含sap.ui.commons.button的UI5应用：

上图的Elements标签页里，显示的是SAP UI5应用渲染完毕后，生成的HTML原生代码。里包含的button标签的生成逻辑，我们已经在前一篇文章深入学习SAP UI5框架代码系列之二：UI5 控件的渲染器里介绍过了。

我们采用与前一个原生HTML button例子同样的操作方式，在Chrome开发者工具里检查UI5应用里该button的Event Listeners，却什么也没发现。

选中"Ancestors"前面的勾之后，一下子显示了很多条目出来：

展开条目中的click，发现SAP UI5把click事件注册在button标签的父节点，即id为content的div标签上了，如下图所示。

再看看UI5应用里sap.ui.commons.Button的事件注册代码：

这里并没有出现HTML原生事件click的身影，而将一个包含了属性名称press，值为JavaScript函数的JavaScript对象，作为输入参数，传入了UI5 Button的构造函数里：

用户点击这个按钮时，触发的应该是名称为click的事件，和我们在这里为press事件注册的处理函数有什么关系？

在UI5 button的实现源代码里能找到答案。切换到Chrome开发者工具的Sources标签页，快捷键Ctrl + O，输入button，选择第一个结果Button-dbg.js:

这里能看到，press作为button支持的事件，定义在Button-dbg.js里：

下面这段代码的含义是，当UI5 button有click事件发生时，如果其本身处于enabled并且是visible状态，则fire一个Press事件(this.firePress()):

因此，正是Button实现里的这个onclick函数，实现了从事件click映射到事件press的任务。

上图调试器里168行的this.firePress调用，最终如何成功地调用到UI5程序里针对press事件注册的处理函数的呢？

还记得这个系列的前一篇文章深入学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制里介绍的一个知识点吗？

SAP UI5运行时为所有的Module维护了一个注册表，以键值对的数据结构存储了这些Module的信息，键的数据类型为string，值类型即window.eval()将加载好的JavaScript文件内容作为输入参数，执行后返回的JavaScript对象。

类似的原理，SAP UI5里每个控件都维护了一个键值对结构的事件注册表mEventRegistry, 键的数据类型string，存储事件名称，值类型为数组，里面存放了针对该事件，应用程序实现的响应函数。

下图展示的是我脚手架应用里的button控件的事件注册表，只包含一条记录，键为press，值为一个数组，里面唯一的元素即我在脚手架应用里实现的包含了alert调用的事件响应函数。

下图展示的逻辑是：

(1) SAP UI5框架从第237行的控件事件注册表里，根据事件名称press，取出存放其事件处理函数的数组；

(2) 遍历该数组，在for循环里用JavaScript function原型提供的call方法，对这些响应函数进行调用，完成事件响应：

至此又引出了一个新的问题：button控件的事件注册表mEventRegistry里的那唯一的条目，是何时填充进去的？

再回忆本系列第一篇文章里介绍的SAP UI5控件的原型链：

Button->Control->Element->ManagedObject->EventProvider->BaseObject.

UI5应用里这一行语句：

new sap.ui.commons.Button()

会依次执行控件原型链上每一个节点对应的构造函数。控件事件注册表mEventRegistry的填充操作，就发生在EventProvider这个节点的构造函数里：

上图的变量oValue，就是我new一个button实例时传入的press事件的处理函数。在第1192行代码里，调用attachPress将oValue指向的函数进行注册。函数attachPress最终调用EventProvider的attachEvent方法，将键值对写入mEventRegistry:

至此有最后一个问题还未解答：本文开头部分展示的Chrome开发者工具里，SAP UI5页面渲染后生成的button标签，在Event Listeners一栏里观察不到任何响应函数。而在其父节点，id为content的div标签里，在click事件下却能观察到响应函数。

Button父节点的div标签上的click方法，和本文讨论了这么长时间的button事件注册表里的press事件，到底有何关系？

按钮被点击时，查看调试器里显示的调用栈最外一层，发现SAP UI5的jquery-dbg.js, 响应的是HTML原生的click事件，且触发该事件的对象的的确确是id为content的div标签，而不是button标签，这一点可以从event.currentTarget的值来确认。

以上图调用栈中绿色的线为分隔，绿线下方的代码，处理的是HTML原生的点击事件click，同时完成了将click事件，经div投递给其子节点，button标签的任务。

绿线上方的Button.onclick, 前文我们已经阐述过，通过this.firePress将click事件映射成press事件，后续SAP UI5的所有事件处理，均围绕这个press事件进行。

按照SAP UI5开发团队大佬Andreas Kunz的介绍，button这种press事件称为Semantic事件。同HTML原生的click事件直接通过onclick或addEventListener注册在HTML DOM元素上不同，Semantic event的注册和调用都是通过SAP UI5框架的JavaScript代码施加在SAP UI5自行实现的控件上，比HTML原生的DOM事件处理和响应轻量得多，能避免随着DOM树复杂度的增加而造成的应用性能下降。

引入Semantic事件后，UI5控件不直接响应HTML原生事件，而是通过一个叫做UIArea的实体，来接收用户触发的HTML原生事件，并将其dispatch给UI5控件，后者再将其映射成一一对应的Semantic事件，并调用应用程序里实现的响应函数。这里的UIArea可以类比成设计模式里的Facade(外观)模式，对SAP UI5的应用开发人员屏蔽了底层事件映射的复杂度。

上图的UIArea的详细描述，在SAP UI5官方文档里有记载。

下图高亮的一段对UIArea的阐述，展开来讲就是Jerry本文的内容，大家感兴趣的可以移步这个链接继续阅读。

如果把本文提到的Semantic事件换个叫法，比如称其为虚拟事件，那么很容易联想到Angular，Vue和React里引入的Virtual DOM(虚拟DOM)概念。从本质上说，这些前端框架都采取增加框架实现复杂度的代价，引入一个中间抽象层，来减少直接在JavaScript层操作DOM层造成的性能开销。

顺便说一句，AngularJS里的控件注册实现，同SAP UI5思路一致：同样未采取将事件处理函数直接注册到HTML DOM元素上的机制。

下图是一个Angularjs应用，第22行的ng-click指令，告诉Angularjs框架，超链接被点击后，根据模型字段name，进行排序。

Angularjs框架如何解析这个ng-click指令，并完成事件注册的？

在Angularjs应用bootstrap阶段，框架会遍历HTML DOM tree，递归调用compileNodes方法，逐一解析每一个包含了ng指令的元素：

当解析到包含了ng-click = "sortField = 'name'"的a标签时，调用Angular元素element的on方法，进行事件注册：

查看on方法的实现代码可知：Angularjs也并未将事件响应函数注册到DOM元素上，而是同SAP UI5一样，在框架内维护了一个控件事件注册表，this.$$listeners(SAP UI5的名称叫做mEventRegistry)，采用键值对的数据结构，来存储事件名称和其对应的事件响应函数。

Angularjs应用里，事件响应函数被调用时的调用栈截图：

关于SAP UI5和Angularjs的事件处理机制比较的更多细节，可以参考我的SAP社区博客：

Compare Event handling mechanism: SAPUI5 and Angular

本系列下一篇文章介绍的内容：UI5控件元数据实现细节。

感谢阅读。