> 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() ?
You're right in that point, the event handlers will be readily
available as soon as the element is loaded, before DOMready. But
usually that is not a problem. What I would call "extra work" is
having to edit the HTML every time you need to change a behavior or
function. One of the good reasons for unobtrusive JS is that it makes
development easier, you have a file for structure, one for
presentation and one for behaviors.
> 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?
Yes, there would. But if you have a huge page you should be using
event delegation/live(). That way you can bind to the document and
avoid the loading problems.
The hide problem depends on what you're doing. If you have a <form>
which will be replaced by other controls, it's better to hide it in
the js, so that it stays accessible for the ones with js off - and the
opposite, if you have content which only makes sense with javascript
on, you can hide it in CSS and show it with JS.
>
> 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?
You can either use event delegation (much simpler), or bind the
handlers after creating the mark-up, inserting a script tag.
> 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 :)
I'm sure you'll discover many more benefits to this approach.
cheers,
- ricardo
No comments:
Post a Comment