Add more behavior to existing onclick attribute in javascript

Question

Hi,
how can i add more behaviour to existing onclick events e.g. if the existing object looks like

<a href="http://abc" onclick="sayHello()">link</a>
<script>
function sayHello(){
    alert('hello');
}

function sayGoodMorning(){
    alert('Good Morning');
}
</script>

how can i add more behavior to the onclick that would do also the following

alert("say hello again");
sayGoodMorning()

Best Regards, Keshav

Answer 1

One way would be to write a third function:

<a href="http://abc" onclick="foo()">link</a>
<script>
function sayHello(){
    alert('hello');
}

function sayGoodMorning(){
    alert('Good Morning');
}

function foo() {
    alert("say hello again");
    sayGoodMorning();
}
</script>

Answer 2

<a href="http://abc" onclick="sayHello(),sayX(),sayY(),sayZ()">link</a>

would also work

Answer 3

Here's the dirtiest way :)

<a href=".." onclick='sayHello();alert("say hello again");sayGoodMorning()'>.</a>

Here's a somewhat saner version. Wrap everything into a function:

<a href=".." onclick="sayItAll()">..</a>

JavaScript:

function sayItAll() {
    sayHello();
    alert("say hello again");
    sayGoodMorning();
}

And here's the proper way to do it. Use the event registration model instead of relying on the onclick attribute or property.

<a id="linkId" href="...">some link</a>

JavaScript:

var link = document.getElementById("linkId");
addEvent(link, "click", sayHello);
addEvent(link, "click", function() {
    alert("say hello again");
});
addEvent(link, "click", sayGoodMorning);

A cross-browser implementation of the addEvent function is given below (from scottandrew.com):

function addEvent(obj, evType, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent) {
        var r = obj.attachEvent("on" + evType, fn);
        return r;
    } else {
        alert("Handler could not be attached");
    }
}

Note that if all 3 actions must be run sequentially, then you should still go ahead and wrap them in a single function. But this approach still tops the second approach, although it seems a little verbose.

var link = document.getElementById("linkId");
addEvent(link, "click", function() {
    sayHello();
    alert("say hello again");
    sayGoodMorning();
});

Answer 4

Assuming a slight change to your code:

<a href="http://abc" id="a1" onclick="sayHello()">link</a>

In plain ol' JavaScript, you'd do something like this.

var a = document.getElementById('a1');
a.onclick = function () { alert('say hello again'); a.onclick(); }

It's worth noting that jQuery makes this a bit easier. See the documentation on the click, bind, and one, for example, and in general the section on event handler attachment.

Answer 5

Another way not mentioned is to capture the function currently assigned to the element.onclick attribute, then assign a new function that wraps the old one. A simple implementation to demonstrate would be something like

function addEvent(element, type, fn) {
    var old = element['on' + type] || function() {};
    element['on' + type] = function () { old(); fn(); };
}

var a = document.getElementById('a');

function sayHello(){
    alert('hello');
}

function sayGoodMorning(){
    alert('Good Morning');
}

addEvent(a, 'click', sayHello);
addEvent(a, 'click', sayGoodMorning);

Working Demo here