共计 1514 个字符，预计需要花费 4 分钟才能阅读完成。
Jerry 最开始是用 SAP UI5 进行 SAP CRM Fiori 利用的开发。最近一段时间做 SAP Spartacus 开发，在用 Angular，因而借这个机会将两个前端框架的事件处理实现细节做一个比拟。
SAP UI5 事件处理
通过 button 控件的 attachPress 办法注册一个 Press 事件点击的处理函数：
button 控件自身的实现是没有 attachPress 这个办法的，这一点能够从 hasOwnProperty 返回 false 来确认：
Instead, it is provided by the node in the button instance’s prototype chain, EventProvider.
顺着 SAP UI5 button 原型链沿着继承关系向上寻找，最初发现在 EventProvider 里提供了 attachEvent 办法。如果对 SAP UI5 button 的原型链不相熟，能够参考我这篇文章：深刻学习 SAP UI5 框架代码系列之一：UI5 Module 的懒加载机制
当咱们利用代码里调用 attachPress 时，传入这个函数的事件响应函数被退出到一个 SAP UI5 对立保护的事件处理注册表 mEventRegistry 里，这是一个键值对数据结构，key 为应用程序注册的事件名称，值为咱们传入的 事件响应函数。如下图所示，key 为 press，值为 fFunction：
当咱们点击了 UI 上的按钮之后，SAP UI5 控件的 Button.onclick 办法会被调用，外面会 fire 一个 Press 事件。这里实现了浏览器原生的 click 事件到语义事件 Press 的转换。
SAP UI5 依据 press，到事件注册表 mEventRegistry 里去查找，将所有注册到该事件上的所有响应函数取出，放到一个数组 aEventListeners 里，遍历这个数组，逐个调用响应函数。
Angularjs 事件处理
下图是一个 Angularjs 利用，基于 Angularks 1.2.18 开发而成. 在界面上显示了硬编码之后的三个国家的人口，我心愿通过人口对这三个国家进行排序。
我给 Country 这一列通过 ng-click 指令注册了一个排序逻辑：sortField = ‘name’
Angular 和 SAP UI5 一样，有本人的 bootstrap 阶段。在此阶段 Angular 框架做的事件之一，就是 Angular 框架会通过下图第 964 行代码即 compile 函数，遍历 html DOM 树。
如果发现有一个 element attribute 具备 ng 前缀，执行 applyDirectivesToNode 函数，为该节点增加一些非凡的逻辑。
Angular 通过下列的三个步骤，对 ng-click = “sortField = ‘name'” 进行响应函数注册：
第一步：解析蕴含 ng-click= “sortField = ‘name'” 的 HTML 元素，创立一个 wrapper fn.
第二步：15328 行，应用 element.on 给 click 事件注册响应函数。这个响应函数外部调用 Angular 第一步创立的 wrapper fn.
第三步，用户点击超链接之后，15330 的函数触发。
“sortField =‘name’”通过 assign 函数实现：
Finally, scope obj (you can consider scope as“Model”in UI5 at this moment) has attribute sortField which has been assigned with a new value“name”, this is how
“sortField =‘name’”的执行：Scope 对象的属性 sortField 被赋上了值：name
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
