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

Question

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

Où SomeMethod aurait pu :

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 stupide, mais l'idée n'est pas d'envoyer l'identifiant lui-même, mais le contrôle réel qui appelle la méthode. Je jure que cela peut être fait, mais je n'ai pas eu de chance en cherchant... en partie parce que je ne suis même pas sûr de savoir sur quoi chercher.

Je pensais que c'était self, mais self ne semble pas être ce que je veux lorsque le script que j'ai exécuté.

Answer 1

Utilisez le this Mot clé.

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

Answer 2

En fait, vous n'avez pas besoin de passer este comme un argument à votre fonction, parce que vous avez une Objet de l'événement de clic auxquels 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 fonctions à partir d'attributs HTML :-.

onclick="SomeMethod.call(this)"

Ensuite, dans le javascript, faites :-

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

Cela présente un avantage certain lorsque vous pouvez également assigner directement les propriétés des gestionnaires d'événements dans le code Javascript :-.

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

Si SomeMethod prenait l'élément de contexte comme paramètre, il serait très difficile de le mettre en place :-.

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

Pire encore, il s'agirait d'une fermeture avec fuite de mémoire.

Answer 4

A ce stade : SomeMethod(this) - this renvoie l'objet fenêtre donc ne l'utilisez pas. La bonne façon d'utiliser this Le mot clé doit être pertinent par rapport au contexte. SomeMethod.call(this) .