如何找到一个前端事件对应的事件处理函数

版权声明：本文为博主汪子熙原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1440527

例子：

我想知道这个被fire的_change事件，到底被哪些处理函数接收并处理？

我们一步步来。

Suppose I am an Application developer and I am interested with the change event of button instance, I can subscribe to this “_change" event by line 14 ~ 16:

Then in line 17, setText will call fireEvent internally:

反思一下，你的button 设置text时，比如你传了一个“click me”给button,框架会抛出一个-change的event.你注意到了这个event,并且做出了一个猜想: 你最后之所以能在Ui上看到click me的文字，是因为那个event event抛出去之后，背后有某个event handler在处理这个event. 这个event handler负责把click me的文字画到UI上。

然后你问我想找到这个event handler的具体实现。这个假设完全合理。然后我们debug fireEvent的具体实现，发现其逻辑就是遍历一个array,该array存放了所有注册在change event上的js function.但是我们debug发现这个array是空的。因此证明你这个假设是错误的，在当前session里，没有任何一个function注册在了change event上。这个change event白白抛出去了，没有任何人理它。这也是合理的。我们为什么要设计event publish/subscribe这套pattern?无非是为了解耦事件发布和事件监听者的依赖关系。比如我在教室里直接吼一声，我爱玩星际！我吼的时候，根本不care到底有没有喜欢。当有人监听了我吼的事件，这里的event就是我吼的声音。事件被监听之后，监听者打印一条log,我也喜欢，来一局。他监听之前，他也不care到底是谁吼的，他关心的只是event本身，即我爱打星际这句话。而我，就是oEvent.source.

做出错误的假设一点不可怕，但最重要的是，你要有能力通过阅读代码迅速确认自己的假设到底是100%正确还是100%错误。如果不能做到仅凭debug现成的代码就能做到100%肯定或否定，请自己设计一些测试代码和程序来验证自己的猜想。

再回到这个具体的问题。始终记住我们在eb开发这个大topic下，任何前端框架，CRM WEB UI, SAP UI5, Angular, React or whatever,无论多花哨的技术，最终都要回到用DOM NODE渲染UI上去. 我们在UI上看到的所有文字和效果，最终也都来自DOM NODE. 而Dom node从哪来?从控件对应的Render来。所以这个问题一旦判定了button text 不是通过change event的监听者画出来的之后，要果断往其他方向想。

Ui5 framework里你们看到的大多数代码都只是个中间层，里面的crud不会直接影响到最后UI的显示，因此千万不要有你看到一行JS代码比如setValue(“A”）就期望在Ui上马上看到一个A. UI5不是这样DESIGN的。真正刷新UI的操作都是在renderer里做的。