Javascript: How to make a Control send itself in a method.

Question

<a href="" id="someId" onclick="SomeMethod(self);"></a>

Where SomeMethod could have:

function SomeMethod(item)
{
  item.setAttribute('name', item.id);
}

Instead of:

function SomeMethod(itemId)
{
  var someItem;

  someItem = document.getElementById(itemId);
  someItem .setAttribute('name', someItem .id);

}

Silly example, but the idea is not to send in the id itself, but the actual control calling the method. I swear this can be done but have had no luck searching... partially because I'm not even sure what to search on.

I thought it was self, but self doesn't seem to be what I want when the script I have runs.

Answer 1

Use the this Keyword.

<a href="" id="someId" onclick="SomeMethod(this);"></a>

Answer 2

I tend to use this approach in all function calls from HTML attributes:-

onclick="SomeMethod.call(this)"

Then in the javascript do:-

function SomeMethod()
{
   this.setAttribute('name', this.id);
}

This has a distinct advantage when you may also assign directly to event handler properties in Javascript code:-

document.getElementById("someID").onclick = SomeMethod

If SomeMethod took the context element as a parameter it would very awkward to set up:-

function(id) {
   var elem = document.getElementById(id)
   elem.onclick = function() { SomeMethod(elem); }
}("someID");

Worse yet this would be memory leaking closure.

Answer 3

You actually don't need to pass this as an argument to your function, because you've got a click event object that you can access. So:

<a href="" id="someId" onclick="clickEventHandler()"></a>
<script>
function clickEventHandler(event) {

    if (!event) {
        event = window.event; // Older versions of IE use 
                              // a global reference 
                              // and not an argument.
    };

    var el = (event.target || event.srcElement); // DOM uses 'target';
                                                 // older versions of 
                                                 // IE use 'srcElement'
    el.setAttribute('name', el.id);

}
</script>