One benefit of calling functions directly from markup is that it is easier to track what's being called. I would like to know if there is an browser addon or something that supports a "Goto javascript source function" for each of the events attached (bound) to an element. Ideally this would take me to the original location it got bound.
You can use FireQuery add on with Firefox browser. It will show you all the events attached to a dom element.
https://addons.mozilla.org/en-US/firefox/addon/firequery/
The built-in Chrome 12 debugger will show you any Event Listeners for any object in the DOM. It can be quite useful, especially to find your way around a larger project. It shows you what event and where the code is.
Related
I've been wondering a long time about this. Is there a way in eg Chrome to see what events are bound to an element? Since many people now use jQuery with a syntax like the following:
$("a.subtle").click(function(){
//do something
});
Is there a way in the inspector to easily find this code? I know in the inspector you can go to the "event listeners"-tab to see what events are bound. Looking at an example I can see there is a click-event on the element with the js file of jQuery next to it, so this must somehow point to it, but of course it is obscured by all the jQuery code. Here's what I'm looking at:
So the question is, is there a quick way to find the jQuery code applied to an element? To be clear, I want to quickly find the code I posted up top.
I could search through the source code for a .click() on that class, but of course it could be done via its parent, or with .on(), or on so many bazillion ways..
Check out the Visual Event bookmarklet.
Here's a quote from their website:
Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.
Visual Event shows:
Which elements have events attached to them.
The type of events attached to an element.
The code that will be run with [sic] the event is triggered.
The source file and line number for where the attached function was defined (Webkit browsers and Opera only).
I was inspecting my source on a page that uses Rafael js and some elements have "element.click(handler)"
on several elements however I never see any "onclick=handler()" or any events on the svg elements, so how does it know to call handler when the element is clicked?
The reason I ask is because one of my elements works the first time you click on it, but doesn't work after that. There is no js error, it just doesn't call the method anymore and I don't know how to debug this, since I can't tell if the onclick is gone from the element or what.
Any ideas?
Thanks
You can not see for eg. because he is not using that coding.
He uses his own addEvent function that uses addEventListener(FF) or attachEvent (MS) depending on what browser that code runs.
On FF/chrome install firebug plugin and use debugger; statement.
Use console.log(); or alert() to represent yourself what's going on in that handler function.
And take a good look at 'this' if you are using it. 'This' changes scope depending on fun or object.
I just installed firebug and want to see and debug jquery and javascript methods when fired.
Suppose that a jquery function will be called when button is clicked. When the site is huge and the page includes many js files then it is very difficult to point out which function will be called and where it is defined, because people attach button events in a different way. I mean the event is attached sometime based on css. So sometimes I just cannot find out which method is going to be invoked.
So please give me some tips so that I can see those functions invoke and the function body at run time wherever it is defined. Thanks.
You can try using FireQuery. From the site:
jQuery expressions are intelligently presented in Firebug Console and DOM inspector
attached jQuery data are first class citizens
elements in jQuery collections are highlighted on hover
jQuerify: enables you to inject jQuery into any web page
jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)
I've used it a few times and it makes debugging (when using jQuery) much easier.
EDIT
Using the plugin, you can look at the element and see the events bound to it. Your other option is to search your codebase for anything that identifies the element (id or css class perhaps). Then you should also be able to see what gets bound.
Take a look at http://firequery.binaryage.com/ (FireQuery). It's an extension to FireBug that allows you to see jQuery calls. I haven't used it that much, but it might be what you're looking for.
What is the straight JavaScript syntax to replace the jQuery's keydown event?
Lint is complaining so much that it's hard to read my Firebug console.
Since I'm developing a proof-of-concept for me only, I'm not worried about any cross browser problems - it only has to work in Firefox at the moment.
That's because charCode is indeed meaningless in the keydown event. Change the keydown event to a keypress event if you need to know the charCode.
According to DOM level2 Events:
The DOM Level 2 Event specification
does not provide a key event module.
An event module designed for use with
keyboard input devices will be
included in a later version of the DOM
specification.
So there is no standard concerning the key events. Currently all the browsers do as they see fit. If you are using a JS framework it should give a consistent value in all browsers (that would be the main point of the framework after all).
First, the others explained quite well the roots of your problem.
But for the record, answering your original question, what you need is addEventListener. This is a non-obtrusive, nice and modern way to attach events in Javascript. Works in every modern browser (so not under IE9, for those IEs you need attachEvent).
So for example, using addEventListener, you assign events like:
var elem = document.getElementById("fos");
elem.addEventListener("keydown", whateverFunction, false);
You can also use the simple way (elem.onkeydown=whateverFunction;), but I discourage you to do it. With addEventListener, you can assign several handlers to the same event, and you cannot accidentally overwrite another event you or a library/3rd party script assigned.
Change
$(document).keydown(function(myEvent) {
to
document.onkeydown=function(myEvent){
Is there a way to debug or trace every JavaScript event in Internet Explorer 7?
I have a bug that prevents scrolling after text-selecting, and I have no idea which event or action creates the bug. I really want to see which events are being triggered when I move the mouse for example.
It's too much work to rewire the source and I kind of hoped there was something like a sniffer which shows me all the events that are triggered.
Loop through all elements on the page which have an onXYZ function defined and then add the trace to them:
var allElements = document.all; // Is this right? Anyway, you get the idea.
for (var i in allElements) {
if (typeof allElements[i].onblur == "function") {
var oldFunc = allElements[i].onblur;
allElements[i].onblur = function() {
alert("onblur called");
oldFunc();
};
}
}
You might want to try Visual Studio 2008 and its feature to debug JavaScript code.
If the problem is not specific to Internet Explorer 7 but also occurs in Firefox, then another good way to debug JavaScript code is Firefox and the Firebug add-on which has a JavaScript debugger. Then you can also put console.log statements in the JavaScript code which you can then see the output of in the Console Window in Firebug, instead of using alerts which sometimes mess up the event chain.
#[nickf] - I'm pretty sure document.all is an Internet Explorer specific extension.
You need to attach an event handler, there's no way to just 'watch' the events. A framework like jQuery of the Microsoft Ajax library will easily give you methods to add the event handlers. jQuery is nice because of its selector framework.
Then I use Firebug (Firefox extension) and put in a breakpoint. I find Firebug is a lot easier to set up and tear down than Visual Studio 2008.
Borkdude said:
You might want to try Visual Studio 2008 and its feature to debug JavaScript code.
I've been hacking around event handling multiple times, and in my opinion, although classical stepping debuggers are useful to track long code runs, they're not good in tracking events. Imagine listening to mouse move events and breaking into another application on each event... So in this case, I'd strongly advise logging.
If the problem is not specific to Internet Explorer 7 but also occurs in Firefox, then another good way to debug JavaScript code is Firefox and the Firebug add-on which has a JavaScript debugger.
And there's also Firebug Lite for Internet Explorer. I didn't have a chance to use it, but it exists. :-) The downside of it is that it doesn't a fully-fledged debugger, but it has a window.console object, which is exactly what you need.
It's basic, but you could stick alerts or document.write calls in when you trigger something.
The obvious way would be to set up some alerts for various events something like:
element.onclick = function () { alert('Click event'); }
Otherwise you have a less intrusive option of inserting your alerts into the dom somewhere.
But, seriously consider using a library like jQuery to implement your functionality. Lots of the cross-browser issues are solved problems and you don't need to solve them again. I am not sure exactly of the functionality you are trying to achieve but there are most probably plenty of scrolling and selecting plugins for jQuery you could use.
I am not sure on the exact code (it has been a while since I wrote complex JavaScript code), but you could enumerate through all of the controls on the form and attach an event that outputs something when the event is triggered.
You could even use anonymous functions to wrap the necessary information for identifying which event was triggering.
One thing I like to do is create a bind function in JavaScript (like what you can find in the Prototype library) specifically for events, so that it passes the "event" object along to the bound function. Now, if you were to do this, you could simply throw in a trace call that will be invoked for every handler that uses it. And then remove it when it's not needed. One place. Easy.
However, regardless of how you get the trace statement to be called, you still want to see it. The best strategy is to have a separate pane or window handing the trace calls. Dojo Toolkit has a built-in console that runs in Internet Explorer, and there are other similar things out there. The classic way of doing it is to create a new window and document.write to it.
I recommend attaching a date-time to each trace. Helped me considerably in the past.
Debugging and alerts usually won't help you, because it interrupts the normal event flow.
Matt Berseth has something that may be the kind of thing you're looking for in Debugging ASP.NET AJAX Applications with the Trace Console AjaxControlToolkit Control.
It's based on the Yahoo YUI logger, YUI 2: Logger.
My suggestion is, use FireFox together with FireBug and use the built-in Debug/Trace objects. They are a charm.