What happend when I click the button?

[Emmachen]

What happend when I click the button?

In the file:layoutIndex.html, when I click the button submit,text of the textView will change automatically. Since I have already learned something about data binding, before I learn more abouttit,let's first find out what happend when a button is clicked.

[ghost]

沙发

[Emmachen]

first, I set a break-point at the event listener: when click the button,we can direcly jump into the event structure: and here we can see the CurrentTarget is div#content where we place our control. And the event type is “click".Then we get into the function dispatch. inside the function ,we get an Array for handlers:handlerQueue.elems/elements refers to the element of the html page,like div or button. Then we can find the function "UIArea.prototype._handleEvent " , from the commonts ,we get to konw that this is what we are looking for. get the control element: set the element as oEvent's srcControl retrieve the event types,and push to aEventTypes, here the value is "click" rememeber we are still in the function "UIArea.prototype._handleEvent ", then we come to where the ui5 frame dispatch the event to the controls (callback methods: onXXX) line 36720: set the currentTarget of event to the control instead of where we place it. line 36721: handle even starts line 31032: give the event name a "on" prefix line 31034: call the handle function later we find out the click action is implemented in Button.js,and it's link to the event press we set in the code. finally we r back to sap-ui-core-dbg.js,and call the function fireEvent: first get the eventListeners,from the array this.mEventRegistry here call our event handler: plus: when does the value filled of mEventRegistry. the anwser is when we new the control button, the construtor of eventProvider will finish that.: let's see the call stack: and this is how the click event is done.

[ghost]

There is a UI5 framework developer who has comments in one of my blogs, explaining the difference of click and press event from design perspective. I will paste it here tomorrow.

在 2016-05-24 23:02:50，Emmachen notifications@github.com 写道：

first, I set a bread-point at the event listener:

when click the button,we can direcly jump into the event structure:

and here we can see the CurrentTarget is div#content where we place our control. And the event type is “click".Then we get into the function dispatch. inside the function ,we get an Array for handlers:handlerQueue.elems/elements refers to the element of the html ,like

, . page.

Then we can find the function "UIArea.prototype._handleEvent " , from the commonts we get to konw that this is what we are looking for.

get the control element:

set the element as oEvent's srcControl

retrieve the event types,and push to aEventTypes, here the value is "click"

rememeber we are still in the function "UIArea.prototype._handleEvent ", then we come to where the ui5 frame dispatch the event to the controls (callback methods: onXXX)

line 36720: set the currentTarget of event to the control instead of where we place it. line 36721: handle even starts

line 31032: give the event name a "on" prefix line 31034: call the handle function later we find out the click action is implemented in Button.js,and it's link to the event press we set it the code.

finally we r back to sap-ui-core-dbg.js,and call the function fireEvent:

let's see the call stack:

and this is how the click event is done.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub

[Emmachen]

I think I konw the blog u mentioned and I've seen it , it makes my thoughts more clear. http://scn.sap.com/community/fiori/blog/2015/10/24/how-i-do-self-study-on-a-given-fiori-control--part-3 I add sth abuot the event registry in my anwser. again I have to say the way u analyze a question is so effective and clear, that is also what I want to learn.

[ghost]

Hello Wenxin,

Today I start to do self study on Angular. The knowledge you learned from this issue is very very important. All UI framework, UI5 or Angular, uses the exactly the same mechanism for event subscription and event publish, which is what you have already learned:

• event registration: add related information to an Array maintained by framework
• event publish: loop that array to fetch corresponding handler, and call it via JavaScript keyword call.

That's all.

Best regards, Jerry