[removed] Adding an onClick handler without overwriting the existing one

Question

I\'m trying to modify all links on a page so they perform some additional work when they are clicked.

A trivial approach might be something like this:

Answer 1

You need to create a closure to preserve the original onclick value of each link:

<a href="#" onclick="alert('hi');return false;">Hi</a>
<a href="#" onclick="alert('there');return true;">There</a>
<script type="text/javascript">
function adaptLinks() {
    var links = document.getElementsByTagName('a');
    for (i = 0; i != links.length; i++) {
        links[i].onclick = (function () {
            var origOnClick = links[i].onclick;
            return function (e) {
                if (origOnClick != null && !origOnClick()) {
                    return false;
                }
                // do new onclick handling only if
                // original onclick returns true
                alert('some work');
                return true;
            }
        })();
    }
}
adaptLinks();
</script>

Note that this implementation only performs the new onclick handling if the original onclick handler returns true. That's fine if that's what you want, but keep in mind you'll have to modify the code slightly if you want to perform the new onclick handling even if the original handler returns false.

More on closures at the comp.lang.javascript FAQ and from Douglas Crockford.

Answer 2

Using JQuery, the following code works:

function adaptLinks(table, sortableTable)
{
    $('a[href]').click(function (e)
    {
        if(!e.isDefaultPrevented())
        {
            <do some work>
        }
    });
}

This requires using an extra library but avoids some issues that exist with addEventListener/attachEvent (like the latter's problem with this references).

There is just one pitfall: if the original onClick handler is assigned using "normal" JavaScript, the line

...
if(!e.isDefaultPrevented())
...

will always resolve to true, even in case the original handler canceled the event by returning false. To fix this, the original handler has to use JQuery as well.

Answer 3

I had problems with overloading in the simple way - this page was a great resource http://www.quirksmode.org/js/events_advanced.html

Answer 4

Don't assign to an event handler directly: use the subscribe model addEventListener / attachEvent instead (which also have remove pairs!).

Good introduction here.

Answer 5

how about setting oldClick = links[i].onclick or an empty function. Like so

var oldOnClick = links[i].onclick || function() { return true; };

links[i].onclick = function (e)
   {
       if (!oldOnClick())
           return false;
       //<do some work>
       return true;
   }

Or you could use attachEvent and addEventListener as others have recommended

function addEvent(obj, type, fn) {
        if (obj.addEventListener)
                obj.addEventListener(type, fn, false);
        else if (obj.attachEvent)
                obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);});
}

and use like so

addEvent(links[i], 'click', [your function here]);

Answer 6

Use a wrapper around addEventListener (DOM supporting browsers) or attachEvent (IE).

Note that if you ever want to store a value in a variable without overwriting the old value, you can use closures.

function chain(oldFunc, newFunc) {
  if (oldFunc) {
    return function() {
      oldFunc.call(this, arguments);
      newFunc.call(this, arguments);
    }
  } else {
    return newFunc;
  }
}

obj.method = chain(obj.method, newMethod);

In Aspect Oriented Programming, this is known as "advice".