Question

In many website pages, there are a lot of javascript codes to support the functionalities. The programmer can attach the event on the element via many methods. They can add the event directly in the element definition like

<input type="button" onclick="dosomething();"> 

or they can do this by javascript codes like:

<script>
    document.getElementById('ele').onclick = function(){};
</script>

And usually there are so many codes here so that it’s sometimes difficult for us to identify which event function are called after the element event is triggered.

So my question is: is there any method or plug-in can help to identify the next running javascript statement or function entry point after one element event is triggered?

Answer 1

One thing you could do is, define a function that will grasp all events assigned to each type of elements and show them somewhere on the page(preferably at the bottom). To trigger that, function you may add a button which should be clicked.

Of course, all this must be done in debugging state and you would certainly want to remove the button and the display panel when releasing the App.

We used to do this for our project, may not be elegant but it does serve the purpose.