Override default behaviour for link ('a') objects in Javascript

Question

I don't know if what I'm trying to accomplish is possible at all. I would like to override the default behaviour for all the anchor objects (`A` tag) for a given HTML page. I know I can loop through all the `A` elements and dynamically add an `onclick` call to each one of them from the body element `onload` method, but I'm looking for a more absolute solution. What I need is that all `A` elements get assigned an `onclick` action which calls a method that passes the element `href` property as an argument, so the following: ``` ``` Dynamically becomes: ``` ``` Like I said, the ideal way to do this would be to somehow override the Anchor class altogether when the document loads. If it's not possible then I'll resort to the loop-through-all `A` elements method (which I already know how to do).

Accepted Answer

If you don't want to iterate over all your anchor elements, you can simply use event delegation, for example:

```
document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

if (element.tagName == 'A') {
    someFunction(element.href);
    return false; // prevent default action and stop event propagation
  }
};
```

Check the above example here.

Solution