Use of JavaScript in lieu of hyperlinks

Question

As RIAs and SPAs (or web apps with heavy javascript usage) have become more and more popular, I've been running into systems that, instead of using good old a href hyperlinks, I see them utilizing constructs using onclick with JavaScript code that manipulates navigation. This is particularly true with images.

For example, instead of seeing something like this:

<a href="some_url"><img src="...."/></a>

<div ... onclick='SomeJsFunctionThatNavsToAnotherPage()'><img src="..."/></a>

What is the advantage of this? It makes it incredibly hard to trace where pages transition to when debugging or trying to root cause a bug. I can get the idea when the target to navigate can change (so yes, here you could use a function that computes to what page to navigate to.)

But I see this pattern even when the pages to navigate to are constant. I find this extremely convoluted and hard to test. Not to mention that there is always the browser-specific bugs that come from stuff (sadly in my experience from over-complexifying the front-end.)

But I am not a RIA/SPA developer (just backend and traditional web development). Am I missing the rationale behind this?

---

TO CLARIFY

My question is not for the case when we want to redraw the page or change current content without changing the current location. My question is for plain old transitions, from page A to page B.

In such a case, why use onclick=funcToChangeLocation() over <a href="some location"/>.

This has been a pain for me when troubleshooting systems that are already written (for I wouldn't write them like that), but there could be reasons I am not aware of.

Again, my question is not for pages that redraw themselves without changing the browser location, but for navigation from one page to the next.

---

ALSO

If you are going to vote to close this question, at least leave a message explaining why.

Answer 1

If you are making a web application, sometime you don't want to redirect the user to another page, but you want to dynamically change the content of the page without refreshing the page. It has some advantages. It can be faster. You can easily keep the state of the page/application. You are not obligated to communicate with the server. You can update only a part of the page.

You can also dynamically request data to print the page. If you are displaying an user profile page, you can only ask a json object that represent the user. This json object is smaller than the whole page and will be dynamically rendered. It can help to reduce the data transfer between users and server when your bandwidth is limited.

EDIT: In the case of a simple page redirection, I think it's a bad practice and I cannot see an advantage. I think it obfuscate the website when the google crawler try to parse the website.

Answer 2

I once had a pretty successful web directory website. One day Google decided that "directories" are competing businesses and started penalizing sites that had links on directories. I used the method you describe to cloak outgoing links to try and trick Google.