StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Many times you'll see people use the <code>onclick</code> attribute, and simply <code>return false</code> at the end of it. While this does work reliably, it's a bit ugly and may make your code-base difficult to manage.</p> <pre><code><a href="#" onClick="submitComment(); return false;"> </code></pre> <h3>Seperate your HTML from your JavaScript</h3> <p>It's far better for you, and your project if you separate your markup from your scripting.</p> <pre class="lang-html prettyprint-override"><code><a id="submit" href="enableScripts.html">Post Comment</a> </code></pre> <p>With the above HTML, we can find this element and wire up a handler for when the user clicks on the element. We can do all of this from an external .js file so that our HTML remains nice and clean, free from any scripting:</p> <pre class="lang-js prettyprint-override"><code>if (document.addEventListener) { document.addEventListener("DOMContentLoaded", setup, false); } else if (document.attachEvent) { document.attachEvent("onreadystatechange", setup); } else { document.onload = setup; } function setup () { var submit, submitComment; submit = document.getElementById("submit"); submitComment = function (e) { e = e || window.event; e.preventDefault(); alert("You clicked the link!"); }; if (submit.addEventListener) { submit.addEventListener("click", submitComment, false); } else if (submit.attachEvent) { submit.attachEvent("onclick", submitComment); } else { submit["onclick"] = submitComment; } } </code></pre> <p>There's a lot going on in the above code, but let's run over it from 30,000 feet. We start by figuring out how to best setup our code when the browser loads the page up. Ideally we'd like to do this when the DOM is ready.</p> <p>After a few conditional checks we manage to instruct the browser to run our function after the DOM is prepared (this way our anchor element exists for us to interact with its behavior).</p> <p>Our setup function gets a reference to this anchor, creates a function that we'll run when the anchor is clicked, and then finds a way to attach that function call to the click event of the anchor - losing your mind yet? This is the madness JavaScript developers have had to deal with for some time now.</p> <h3>With jQuery, this is much easier</h3> <p>Perhaps you've heard of jQuery, and wondered why it is so popular. Let's solve the same problem, but this time with jQuery rather than raw vanilla JavaScript. Assuming the following markup:</p> <pre class="lang-html prettyprint-override"><code><a id="submit" href="enableScripts.html">Post Comment</a> </code></pre> <p>The only JavaScript we need (thanks to jQuery) is this:</p> <pre class="lang-js prettyprint-override"><code>$(function(){ $("#submit").on("click", function(event){ event.preventDefault(); submitComment(); }); }); </code></pre> <p>That's it - that is all it takes. jQuery handles all of the tests to determine, given your browser, what the best way is to do <em>this</em> or <em>that</em>. It takes all of the complicated stuff and moves it out of the way so that you are free to be creative.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload