Unobtrusive Javascript Obfuscates Handling Events

Question

Do you know what I liked most about intrusive javascript? You always knew what he was going to do when you fire an event.

<a onclick="thisHappens()" /> 

Now that everyone is drinking unobtrusive help, this is not so obvious. Calls to bind events can occur on any line of any number of javascript files that will be included in your page. This may not be a problem if you are the only developer, or if your team has some kind of convention for binding event handlers, as always, using a specific CSS class format. In the real world, however, this makes it difficult to understand your code.

DOM browsers like Firebug seem like they can help, but it still takes a long time to look at all the properties of the element's event handler to find the one that is executing the code you are looking for. Even then, it usually just tells you an anonymous function () without a line number.

The method I found to detect that the JS code is triggered when events are triggered is to use the Safari Profiling tool, which can tell you that JS is run for a certain period of time, but sometimes it can be a lot of JS for hunting.

There should be a faster way to find out what happens when I click an item. Can someone please enlighten me?

Answer 1

If you use jQuery, you can take advantage of your advanced event system and check in which bodies of event handler objects:

 $('body').click(function(){ alert('test' )}) var foo = $('body').data('events'); // you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it. $.each( foo.click, function(i,o) { alert(i) // guid of the event alert(o) // the function definition of the event handler }); 

Or you can implement your own event system.

Answer 2

Check out the Visual Event ... this is a bookmarklet that you can use to publish events on the page.

Answer 3

To answer your question, try using the Firebug command line. This will allow you to use JavaScript to quickly capture an element by ID, and then repeat listening to it. Often, if used with console.log, you can even get function definitions.

---

Now, to protect unobtrusive:

The manual that I find in unobtrusive JavaScript is that it is much easier for me to see the DOM for what it is. However, I find that it is generally bad practice to create anonymous functions (with some exceptions). (The biggest mistake I find in jQuery is actually in their documentation. Anonymous functions can exist in the underworld, where a failure does not lead to a useful conclusion, but jQuery makes them standard.) Usually I only have a policy using anonymous functions if I need to use something like bindAsListener from Prototype.

In addition, if the JS files are properly split, they will access one subset of the DOM at a time. I have an "ordered checkbox" library, it is in only one JS file, which is then reused in other projects. I also usually have to use all the methods of this sub-library as member methods of both the JSON object and the class, and I have one object / class for the js file (just as if I were doing everything in a more formalized language) . If I have a question about my “form validation module”, I will look at the formValidation object in formvalidation.js.

At the same time, I agree that sometimes things can become dumb in this way, especially when working with others. But disorganized code is disorganized code, and it cannot be avoided if you are not working on your own and are not a good programmer.

In the end, I would prefer to use /* */ to comment on most of two or three js files, to find the wrong code, then go through the HTML and remove the onclick attributes.

Answer 4

Calling it "kool-aid" seems unfair. DOM Level 2 events solve specific inline event processing issues, such as conflicts that always arise. I don’t look back at writing code to use window.onload , which should check if someone has appointed one earlier, and sometimes delays it accidentally or due to negligence. It also provides better separation of layers of structure (HTML) and behavior (JS). All in all, this is good.

As for debugging, I don’t think there is a way to allow event handlers to be anonymous functions, except that authors can use these functions where possible. If you can, tell them that it creates more meaningful call stacks and makes the code more convenient.

Answer 5

One thing: you won’t be able to see what happens in JavaScript by looking at the HTML code. What a nuisance? HTML for structure.

If you want to check which events are associated with certain elements, there is currently a bookmarklet with a visual event, and firebug 1.6 (IIRC) will have a kind of event inspector.