views:

111

answers:

2

From inside of the fireAlert() function, how can I reference the element that called it, without having to pass this as an argument through the link?

<script type="text/javascript">

//function
function fireAlert(){
    alert();
}

</script>

<a href="javascript:;" onclick="fireAlert();">Fire</a>
+1  A: 

There are easier ways of doing this with jQuery,but this is how it's done without it:

UPDATE: Please try the following HTML/Javascript code. Notice how I am attaching the onclick event inside of window.onload instead of specifying it as an attribute at the element.

For this example, I'm attaching the event to all anchor tags in the page, but you could replace getElementsByTagName with getElementById for a specific one.

<html>
    <head>
     <script language="javascript">
     function fireAlert(e)
     {
      var whoCalled = e ? e.target : event.srcElement;

      alert(whoCalled.innerHTML);
     }
     window.onload=function()
     {
      var allHrefs = document.getElementsByTagName("a");
      for(i=0;i<allHrefs.length;i++)
      {
       allHrefs[i].onclick=fireAlert;
      }
     }
     </script>
    </head>
    <body>
     <a href="#">Hello #1</a>
     <a href="#">Hello #2</a>
     <a href="#">Hello #3</a>
     <a href="#">Hello #4</a>  
    </body>
</html>
Jose Basilio
Isn't srcElement specific to IE only?
htw
That's correct. I updated my post to reflect that.
Jose Basilio
This solution worked neither in FF or IE7. "window.event is undefined". Using Firebug, I cannot find any object named event. I am able to find the onclick event with it's associated element in the stack (in Firebug), but I don't know how to reference that in the code.
Jamis Charles
@Jamis - I updated my original post with new code that I tested in FF, IE7 and Chrome.
Jose Basilio
@Jose - Thanks. I am aware that you can reference e as the event inside the function if you add the event unobtrusively (one way would be to use YUI's Event.addeventlistener() function). Is there any way you can reference event e while using an inline event i.e. '<a onclick="fire()" href="">' ?
Jamis Charles
I researched this very thoroughly and that does not work in FF because it doesn't have the event object.
Jose Basilio
You can reference the event when using an inline event by passing the event object to the function. See http://quirksmode.org/js/events_access.html#link6 for an example.
Simon Lieschke
That's exactly what Jamis does not want. He wants the onclick() to be specified without parameters as an attribute of the element. This works in IE, but not FF. In FF, it works in my example.
Jose Basilio
Thanks for the hard work guys. I'll just have to accept that this is not possible for now :).
Jamis Charles
A: 

As Jose said, it would be easy with jQery.

$(document).ready(function()
{
    $("a").click(function()
    {
     // this == the clicked element
    });
});
alexn
I am using YUI. So if there was an easy way to do this with YUI, that'd work too.
Jamis Charles