So, I have many lines of Javascript codes which is quite unorganized right now. One function among many function is doing some action on 'hover' event, however I cannot find it by just looking through the codes.

I am wondering if it is possible to catch which function cause on hover event with google chrome browser's 'Console.log'

So, I have many lines of Javascript codes which is quite unorganized right now. One function among many function is doing some action on 'hover' event, however I cannot find it by just looking through the codes.

I am wondering if it is possible to catch which function cause on hover event with google chrome browser's 'Console.log'

• javascript
• google-chrome

3 Answers 3

If you are looking for a way to figure out which function is handling specific events using Chrome, you can look at the "event listeners" tab at the bottom right of the "Elements" tab when you do Wrench --> Tools --> Developer Tools in Chrome. That tab should list all the functions that are handling event on the selected node.

There is no native "hover" event on the dom api. There are on the other hand the next best things : mouseenter, mouseleave and mouseover, mouseout. Internally you will find that the jQuery library treats "hover" events as a bination of events where when you mouseenter it fires the first function, when you leave it fires the second method. You can find jQuery documentation on hover here.

Open the developer tools and click on the "Timeline" tab/section. From there hit the record button at the bottom of the page. When it's recording simply hover over the item that you want to investigate, then stop the recording.

In the timeline of events you can look for any mouseover events, and each of them should have an arrow next to them in the timeline. Expanding that arrow will tell you what line of JS was called, how much memory it used and its duration.