Document Ready

The phrase “unobtrusive JavaScript” refers to JavaScript that’s kept completely separate from the content. Instead of adding onclick attributes to our HTML elements, we use event handlers like we just explored in Events. We unobtrusively add behavior to our document without modifying the document itself.

One drawback to this method is that JavaScript can’t “see” any of the elements in our document until they’ve been declared. If we loaded our JavaScript code inside the <head> section of the document, the JavaScript code would be immediately executed and none of the elements we want to interact with would be available to us because they haven’t been rendered by the browser yet.

We could wrap our code in the window.onLoad event ...

Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.