Tutorial :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.


Solution:1

Use the this Keyword.

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


Solution:2

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>  


Solution:3

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.


Solution:4

At this point: SomeMethod(this) - this returns window object so do not use it. The right way to use this keyword is making it context relevant, so use SomeMethod.call(this).


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