How does Google mask the real URLs of links on search results pages?

Question

The following I tested on the latest versions of Chrome and Firefox, and IE11, and the results were the same.

If you do a Google search and then mouse over a link on the search results page, the link shown in the bottom-left corner of the browser window is not the same as the actual href of the a element.
In all three browsers I tested this on, if you inspect the link in the element inspector though, you can easily see the real link (which is to www.google.com), and while the inspector is open, if you mouse over the link again, then you'll see the real URL link in the bottom-left corner of the browser window.

I have two questions regarding this behavior?

1. While perhaps a bit naive to ask, why does Google do this?
2. How does Google do this? Because I saw this behavior in Chrome, Firefox and IE11, I'm thinking that this is some JavaScript-controlled behavior (as opposed to some browser-controlled behavior), but I've never heard of this being possible in JavaScript. If it is possible in JavaScript, how do you do it?

Thank you.

Answer 1

Look at the initial markup:

<a onmousedown="return rwt(this,'','','','3','AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw','35cXyZwuoZY8hBY1VfDr8Q','0CEAQFjAC','','',event)"
      href="http://en.wikipedia.org/wiki/How_Do_You_Do_It%3F">
   <em>How Do You Do It</em>? - Wikipedia, the free encyclopedia
</a>

Initially the href attribute shows the "real" URL. But when you click on the link, the rwt function changes the attribute value to

http://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&ved=0CEAQFjAC&url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHow_Do_You_Do_It%253F&ei=8nSMUqXtLKfe4QSzwIDADQ&usg=AFQjCNF8xnW_qOvuZURbtcZUvB6zhKtRQw&sig2=35cXyZwuoZY8hBY1VfDr8Q&bvm=bv.56643336,d.bGE

To answer your question: they use the onmousedown attribute to change the link's href attribute when you click on it. Barmar points out why they do it.

Answer 2

The link in the results page points to a redirect page on the Google server. They do this so they can track which links people click on. This is more reliable than using Javascript, since it doesn't require users to have Javascript enabled.

You can see the eventual target of the link in the url parameter of the URL.

Answer 3

When the user clicks the href, the onmousedown event handler gets executed before the default behaviour kicks in. This time frame is used to change the href of the anchor tag.

Check out this simplified version of their code:

<a 
  href="https://www.google.com/" 
  data-href='https://www.yahoo.com/' 
  onmousedown="this.href = this.dataset.href"
>Link</a>