How can I locate the js event handler code by inspecting the html element?

[Former Member]

Say I'm on a UI5 application page, there's a button, and I would like to find out which event handler logic is binded to this button, without searching through the controller js file by keyword, how can I locate the js event handler code by inspecting the html element? I tried, but there's no html attribute like onclick='' in the html. Thank you.

[former_member183518 · Accepted solution]

SAPUI5 Diagnostics tools would do it. But there are api's that would do it very much simpler than that. When you inspect the html, just find the runtime id of the control.

• open the console tab in debugger tools
  
• $("#<control-id>").control(0); // gives the sapui5 instance of the control
• Expand the mEvenRegistry
  

[former_member182372]

Open dev tools (cntrl + shift + I)

Open Diagnostic tool (ctr +shift + alt +s)

go to Control tree

select the control

go to breakpoints

select fireEvent (or any particular event like change etc.)

debug till the call (step inside call and you will see controlelrs code like PayChangeForm.controller below) There might be multiple event handlers but usually it is only one

[Former Member]

Thank you Dennis and Maksim,

Allow me to rephrase my question, I'm not trying to look for the general javascript event being triggered (like tap, click), but which event handler method within my UI5 controller code (onListSelected for example) the target UI element is binded to. Thank you

[Qualiture]

I would do the following:

• Open the SAPUI5 Diagnostics window (Ctrl-Alt-Shift-S), go to Control Tree, and locate the control you're looking for
• Suppose you want to check the 'change' event, add a breakpoint to the 'fireChange' event in the right pane
• Now when you trigger the 'change' event for that control, the developer tools of Chrome stop at the breakpoint
• evaluate 'this.mEventRegistry', this contains a map with all event handlers called by the event
• Find the entry for 'change' and you will see the event handler name in your controller

Hope this helps

[former_member182372]

js is a functinoal language, so function is the entity you can pass back and forth 😉

[former_member182372]

all right, after overclocking my brain with bulletptoof coffe here is some snippet:

var walkThroughUI = function(root, fnCallback) {

  if (!root)

  return;

  fnCallback(root);

  $.each(root.findAggregatedObjects(true), function(i, control) {

  fnCallback(control);

  });

};

var includeByEvent = function(__fn) {

  return function(element) {

  $.each(element.mEventRegistry, function(item, i) {

  var aEventListeners = element.mEventRegistry[item], oInfo;

  debugger;

  if (aEventListeners) {

  aEventListeners = aEventListeners.slice();

  for (var i = 0, iL = aEventListeners.length; i < iL; i++) {

  oInfo = aEventListeners[i];

  if(oInfo.fFunction === __fn)

  {

  console.log(element.getId() + ": " + item);

  }

  }

  }

  });

  };

};

you set a breakpoint anywhere you in your controller (onInit is fine) and in console type

walkThroughUI(this.getView(), includeByEvent(this.YOUR_EVENT_HANDLER_FUNCTION) );

that will print you an ID of element and name of the event, like

__xmlview0--Reset: press

[former_member182372]

minified version

var walkThroughUI=function(n,e){n&&(e(n),$.each(n.findAggregatedObjects(!0),function(n,t){e(t)}))},includeByEvent=function(n){return function(e){$.each(e.mEventRegistry,function(t,c){var i,o=e.mEventRegistry[t];if(o){o=o.slice();for(var c=0,r=o.length;r>c;c++)i=o[c],i.fFunction===n&&console.log(e.getId()+": "+t)}})}};

[Former Member]

Can you try this in the console.

sap.ui.getCore().byId("buttonid").mEventRegistry["press"][0].fFunction

here buttonid - Id of the button

press - is the event i have attached to the button.

When you do this,

You will be getting the event .

Hope this will be of some help.

[former_member182862]

hi Tylr

Javascript event handler is track in the event.

maybe this JSBin can help you.

JS Bin - Collaborative JavaScript Debugging

Click on Inspect Button

Thanks

-D