JQuery: Why an unobtrusive JavaScript / Document Ready function and not an OnClick event?

Question

I just started looking at jQuery. I currently do not have AJAX in my web application.

My existing JavaScript in my HTML looks like this:

<form ...> <p>Find what? <input ...></p> <div class="ButtonArray"> <a href="AddRecord.ASP&amp;Action=ADD">ADD</a> <a href="#" onClick="return MyFormSubmit();">FIND</a> </div> </form> 

The buttons for [Add] and [Find] are displayed here. For Find, you need to submit a form, and I use MyFormSubmit (), which checks the data, adds a visual effect to the page, and then the POST data.

I could add CLASS or ID for the Find button, and in JQuery I could write something like:

 $(function() { $(".MySearchButtonClass").click(function() { // validate and process form here }); }); 

At my "newbie" stage of understanding with jQuery, I don’t understand why I would do that.

My old way identifies a method next to an object. Perhaps there is a risk that JS did not load before the user clicks the button (is there? LOAD for JS is at the top of the page).

The JQuery Document Ready method will not be activated until the document is loaded (which, I believe, ensures that JS is present and ready to run?), But it moves the code to a separate part of my HTML file - so when I see MyButtonArray DIV in the HTML source It’s not obvious to me which objects have methods and which don’t.

Can you please help me understand what options and advantages / gotchas I have that I should pay attention to?

Change It’s more convenient for me to manipulate the DOM - for example, LightBox, which can appear when any thumbnail with the "LightBoxThumb" class is clicked - will use Unobtrusive Javascript.

However, I am struggling to convince myself that a button that has a specific action should apply its method in this way. (Of course, I would not put any code on a button, except for one function call on something "in another place", but, in my opinion, this is my best key to what this button does, and the layers are unobtrusive Javascript can make this much harder to define.)

Edit2 - Accepted Answer

I took Cam's answer. It describes unobtrusive Javascript in a way that was useful to me to better understand how and when to use it.

At the moment (it can change when I have more experience!) I will stick to the OnClick event for one, unchanging action on the object, as I feel that it will be easier for me to debug - and diagnose if problems arise. For ZebraStripes on a table that allows you to click on the header column for sorting (and situations of this type), I can see the benefits of an unobtrusive Javascript approach

The last comment of Russia was especially useful, repeated here:

"@ Kristen - You're right, as there are so many software topics, there is more than one approach, and people will vehemently support their beliefs! If we talk about one method for one button I will fully understand where you came from ...

If we are talking about many JavaScripts with the same function calls for more than one element, different function calls for different methods, etc. I think it will be more difficult for myself to mix embedded and unobtrusive approaches, and it would be better to take one or the other approach "

Answer 1

Unobtrusive JavaScript is the main driver for JS code branches from markup

• Separation of functionality (“behavior layer”) from the web page structure / content and presentation
• Recommendations for resolving problems with traditional JavaScript programming (for example, browser inconsistencies and scalability)
• Progressive extension of support for user agents that may not support advanced JavaScript features

With the code in document.ready, it will not execute until the DOM loads and before the contents of the page are loaded

From jQuery Training

With $ (document) .ready (), you can load or fire your events, or do what you want before the window loads.

You can take a look at jQuery in action , I highly recommend it. You can select Chapter 1 and Chapter 5 to book your homepage . I think this can provide a further understanding of why separation may work well.

Finally, look at this question , which has answers detailing how you will find event listeners on the DOM node.

EDIT:

Some thoughts that may convince you why unobtrusive JavaScript might be a good idea.

Imagine that you have a function associated as an event handler for the same event created for each of several elements -

• Would it be easier to know which elements call this function to handle the event when the declaration is embedded in each element or in the declaration is in one place outside the markup?

• What if you want to add elements that call this function when an event is raised on each of them? Would it be easier / better to add an event handler built into each element or change the code in one place?

Answer 2

a document ready event long before a document loading event. the document is ready as soon as the DOM is loaded, so that all the elements exist before you start working with them.

So yes, JS will be ready when rendering the document. Another point associated with bindings is that it is useful for changing the bindings to elements when cetain actions occur.

You can still declare an action on an element if you wish.

Answer 3

Over time, I think you're used to the jQuery syntax and read:

class = "MyFormSubmit" becomes as informative as reading onClick = "return MyFormSubmit ();

In the case when the power really starts to kick (in addition to all the advantages mentioned by other posters), the ease with which you could change the onClick binding using selectors bound to other actions on the web page in such a way that it never seems to myself.

One question that I ask myself is how deeply do I plan to go to any new tool, if I plan to use a framework or library extensively, and then write my own code, the “more native” coding style will become much more natural and other developers who know the tool will find the code much cleaner and more understandable.

Answer 4

You do this in such a way as to separate the user interface logic from the actual HTML design.