StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="nofollow noreferrer">Unobtrusive JavaScript</a> is the main driver for separating JS code from markup</p> <blockquote> <ul> <li>Separation of functionality (the "behavior layer") from a Web page's<br> structure/content and presentation</li> <li>Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)</li> <li>Progressive enhancement to support user agents that may not support<br> advanced JavaScript functionality</li> </ul> </blockquote> <p>With the code in document.ready, it will not execute until the DOM has loaded and before the page contents are loaded</p> <p>From <a href="http://www.learningjquery.com/2006/09/introducing-document-ready" rel="nofollow noreferrer">Learning jQuery</a></p> <blockquote> <p>With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads.</p> </blockquote> <p>You may want to take a look at <a href="http://rads.stackoverflow.com/amzn/click/1933988355" rel="nofollow noreferrer">jQuery in Action</a>, I'd highly recommend it. You can sample <a href="http://www.manning-source.com/books/bibeault/ch01_JQIA_sample.pdf" rel="nofollow noreferrer">Chapter 1</a> and <a href="http://www.manning-source.com/books/bibeault/ch05_JQIA_sample.pdf" rel="nofollow noreferrer">Chapter 5</a> on the <a href="http://www.manning.com/bibeault/" rel="nofollow noreferrer">book's homepage</a>. I think doing so may provide further insight into why separation can work well.</p> <p>Finally, have a look at <a href="https://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node/447106#447106">this question</a> which has answers that detail how you would find the event listeners on a DOM node.</p> <p><strong>EDIT:</strong></p> <p>Some thoughts which may persuade you why unobtrusive JavaScript can be a good idea.</p> <p>Imagine that you have a function bound as an event handler for the same event raised on each of a number of elements - </p> <ul> <li><p>Would it be easier to find out which elements call that function to handle an event when the declaration is inline in each element, or the declaration is in one place, outside of the markup?</p></li> <li><p>What if you want to add to the elements that call that function when the event is raised on each of them? Would it be easier/better to add the event handler inline to each element or to change the code in one place?</p></li> </ul>

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