How to find a Javascript function if it is event handler? - javascript

I want use Chrome developer tool to add a break point to js function to debug it.
For example, a function "buttonAlert()" is binded to a button.
But I don't know where the code of such function, and I don't know where the code that bind the function to button.
So, how can I use the tool to find out the location of function and binding code?

It is actually possible to see event listeners in chrome.
Go to the elements panel, select the element in question and click on Event Listeners on the right side.
Sadly most of the time when jQuery is in use, you only see the part of the source of jQuery that bound the event, not the one that called jQuery.

Related

bind function to action in pdf javascript

i wrote a function in javascript for pdf and added it as a button to my menu
the function adds a annotation to the pdf, but i want to be able to determine where the annotation will be placed. i want to use the mouse for that.
i cant find a way for connectiong a mouse click to the function i wrote,
according to what i saw in the java api documantion there is no way to bind a click event to the function.
i tried doing something which is pure java script like this.addEventListener with no success
also tried adding to my code some js libraries like KeyboardJS but also no success.
id rather have a way to bind my function to a mouse click, but a way to bind it to a specific key could also be very useful.
thank you

set breakpoint to html element?

for example I have button element, the click event is attached to id in XXX.js file (I don't know the file name) , and I have many .js files. I want to debug the button click but how can I figure out where to set breakpoint if i don't know where button click function is ? is there any way to set breakpoint on element ( I'm using firebug, if it's impossible on firebug and possible for any other add-on please tell)
I'm using EXT sencha to add eventhandlers
Events handled with addEventListener:
Using your browser's developer tools, you can often times inspect an element to see what events are bound to it, and from which source file. For instance, the following example shows a click event bound to my button element:
Events handled with jQuery's $.fn.on:
If you bound the handler using jQuery's $.fn.on method, you can look into its internal $._data collection to determine what events handled for which elements:
I would check out this plugin. That will help you find what file/where the bound event lives. Then you can debug from there. http://www.sprymedia.co.uk/article/Visual+Event+2
If you want to know the js file with the listener, use Chrome dev tool, Inspect Element > On the Event Listeners you will find attached listeners and the file and even highlight the code on clicking. I don't know if this feature is in firebug too
Chrome Development Tools provides an Event Listener, which shows you elements and the attached Js-Events. Not quite sure if it helps you with your specific problem.
Firebug implements the getEventListeners command that returns every event listeners for every events for a node:
http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/
Also there is the EventBug extension, that offers a UI:
https://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug

How to find what ASP.NET AJAX event handlers are associated with a DOM element?

I'm customizing an existing ASP.NET 3.5 AJAX web application that I can't modify the source code to (it's SharePoint 2010).
I need to add a click event handler as the first event on a Close button. However, I'd like to check what the existing event handlers already registered on this button do first, so I don't mess anything up.
I'm still learning ASP.NET AJAX and can see the Sys.UI.DomEvent class has methods to add and remove event handlers, but not enumerate them. I know jQuery and am familiar with JavaScript debugging in Chrome.
How can I see which events are registered and insert a custom event handler at a particular position?
There is a technique that will at least allow you to be the first in line (unless another script employs the same trick - unlikely).
What you have to do is hijack the click event. This related question demonstrates the technique: Hijacking onchange event without interfering with original function
All we do is redefine the click function to be one of our own choosing, e.g.
var myButton = document.getElementById('button1')
var oldClick = myButton.click;
myButton.click = function(evt) {
//do whatever you want. When done, call the default click function:
if (oldClick) oldClick(evt);
}
(the syntax in the linked question is superior, but the above code is easier to read).

How do i turn this jQuery to javascript?

I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.

How to know where javascript method is defined and which method is called using firebug

How can we know which javascript method is called and where it is defined? (When methods are attached dynamically)
Let us consider situation where JQuery Bind method is used to bind an event.
If I see control in FireBug with FireQuery, I can see events=Object{click =} handle=function()
But I don't know which method is attached with click event.
Is there any way to detect this method is being called from this file?
For 3-4 files, I could search. but for large number of files with heavy code, it is difficult to search.
You can use console.trace() but this only works within the function
You may also find the question and answer here useful:
what events are bound?
You should be able to click on the "function()" and firebug 1.6 will navigate to the source.
just mouseover the event handler function in firebug (if fireQuery is installed)
Firebug http://img842.imageshack.us/img842/3307/scrg.jpg
http://img842.imageshack.us/img842/3307/scrg.jpg

Categories

Resources