How to get the onclick calling object?

Question

I need to have a handler on the calling object of onclick event.

<a href="123.com" onclick="click123(event);">link</a>  <script>   function click123(event) {     //i need <a> so i can manipulate it with Jquery   } </script> 

I want to do this without the use of $().click or $().live of jQuery but with the method described above.

Answer 1

pass in this in the inline click handler

<a href="123.com" onclick="click123(this);">link</a> 

or use event.target in the function (according to the W3C DOM Level 2 Event model)

function click123(event) {     var a = event.target; } 

But of course, IE is different, so the vanilla JavaScript way of handling this is

function doSomething(e) {     var targ;     if (!e) var e = window.event;     if (e.target) targ = e.target;     else if (e.srcElement) targ = e.srcElement;     if (targ.nodeType == 3) // defeat Safari bug         targ = targ.parentNode; } 

or less verbose

function doSomething(e) {      e = e || window.event;     var targ = e.target || e.srcElement || e;     if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug } 

where e is the event object that is passed to the function in browsers other than IE.

If you're using jQuery though, I would strongly encourage unobtrusive JavaScript and use jQuery to bind event handlers to elements.

Answer 2

The easiest way is to pass this to the click123 function or you can also do something like this(cross-browser):

function click123(e){   e = e || window.event;   var src = e.target || e.srcElement;   //src element is the eventsource }