Javascript: Comment faire en sorte qu'un contrôle s'envoie dans une méthode

Question

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

Où SomeMethod pourrait avoir:

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

Au lieu de:

function SomeMethod(itemId)
{
  var someItem;

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

}

Exemple idiot, mais l’idée n’est pas d’envoyer l’id lui-même, mais le contrôle qui appelle la méthode. Je jure que cela peut être fait, mais je n'ai pas eu la chance de chercher ... en partie parce que je ne sais même pas sur quoi chercher.

Je pensais que c'était moi-même, mais le moi ne semble pas être ce que je veux quand le script que j'ai est exécuté.

Answer 1

Utilisez le this Keyword.

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

Answer 2

En réalité, vous n'avez pas besoin de passer this en tant qu'argument pour votre fonction, car vous disposez d'un objet événement click auquel vous pouvez accéder. Donc:

<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>

Answer 3

J'ai tendance à utiliser cette approche dans tous les appels de fonction à partir d'attributs HTML: -

onclick="SomeMethod.call(this)"

Puis dans le javascript faire: -

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

Cela présente un avantage certain lorsque vous pouvez également affecter directement des propriétés de gestionnaire d'événements au code Javascript: -

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

Si SomeMethod prenait l'élément context en tant que paramètre, il serait très difficile de configurer: -

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

Pire encore, ce serait une fermeture avec une fuite de mémoire.

Answer 4

À ce stade: SomeMethod (this) - this renvoie l'objet window, ne l'utilisez pas. La bonne façon d'utiliser ce mot-clé est de rendre le contexte pertinent; utilisez donc SomeMethod.call (this) .