JavaScript: 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:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        links[i].onclick = function (e)
        {
            <do some work>
            return true;
        }
    }
}

But some of the links already have an onClick handler that should be preserved. I tried the following:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        var oldOnClick = links[i].onclick;
        links[i].onclick = function (e)
        {
            if(oldOnClick != null && !oldOnClick())
            {
                return false;
            }
            <do some work>
            return true;
        }
    }
}

But this doesn't work because oldOnClick is only evaluated when the handler is called (it contains the value of the last link as this point).

Answer 1

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

Good introduction here.