[jQuery] Unobtrusive javascript with jQuery
I have read a lot of articles about separating javascript from markup
and jQuery encourages the practice of unobtrusive javascript. Even
though jQuery makes it extremely easy to implement event binding, I
have a few questions which I was hoping you could help me with.
1) When you bind elements on document.ready(), isn't that more
inefficient than using the onclick() etc function available inside the
markup. When you bind the events on document.ready() you have to
traverse the DOM to locate each element to bind the event to adding
extra over head. I am working on a website which currently has around
a 100 different events on a page, and normally I just use the onclick,
onmouseover function available in the <a href> markup to define these
event while passing $(this) as a parameter, giving me access to the
caller and preventing the extra work needed to bind the events.
Example <a href="#" onclick="myFunction($(this))">my function call </
a>. Am I wrong in my reasoning that this is more efficient than
binding on document.ready() ?
2) Also if you had an extremely long page and you bound events on
document.ready() wouldn't there be instances where the javascript
would not be immediately available while the page is loading? I have
read that it is recommended when using hidden text or hidden areas to
not set the display:none inside the css, but instead use a javascript
function call on document.ready() to hide them. This has the advantage
of preventing the text to be hidden for users who have javascript
disabled. Wouldnt this again have the issue of the hidden text
flashing on the screen?
3) Currently I am using JSPs in which i sometimes come across the
following senario. There is a link for "write a review". If a user is
logged in it opens a review box, if the user is not logged in, it
opens a login form. The login for which action will be triggered
onclick is handled via the JSP tags.
<c:if test="loggedIn"> <a href="#" onclick="login()">review</a></c:if>
<c:if test="notLoggedIn"> <a href="#" onclick="writeReview()">review</
a></c:if>
If I move to unobtrusive javascript, what would be the best way to
handle scenarios like this?
Thank you for your time. I would really appreciate any insight you may
have, I really want to move to unobtrusive javascript, but the above
issues make me reconsider it everytime
Thanks :)