How to write easy to debug/maintain JavaScript Event Handlers

Question

Event Handler can be written in mainly two ways:

<input type="button" onclick="clickFunction()" />

or

 $('#btnID).click( function(){ .. });

Someone has to debug/maintain this code at a later stage. In the first case, we can do "inspect Element" and quickly find what is executed. In the second case, we have to find the right Document Loader code to find where it is assigned.

What is the recommended way?

Answer 1

The recommended way is to write an event handler (the second option). For reasoning behind this, look at "2. Don’t Write Inline Javascript" in this great article.

Furthermore, if you are looking to write code thats easier to debug, consider naming your callbacks. This way they will show up in js errors with the function name instead of "in undefined".

$('#btnID).click( function someEvent(){ .. });