Tutorial :Add more behavior to existing onclick attribute in javascript


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


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>  


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>  


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();  });  


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


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>  


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

would also work


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »