La fonction onClick "this" renvoie l'objet Window

Je suis venu à travers un casse-tête d'un problème avec mon application JavaScript.

Si j'écris un élément comme ceci:

<li onClick="alert(this.tagName)"></li>

- Je obtenir "LI."

Cependant si je fais ceci:

<li onClick="foo()"></li>

Où "foo()" est:

function foo(){ alert(this.tagName); }

- Je obtenir "undefined."

Je suis loin comment "cela" est supposé fonctionner en ce qui concerne les attachés fonctions. Mais, je suis perplexe parce que "cela" n'est pas de ramasser l'élément, mais apparemment défaut "fenêtre". Je ne peux pas comprendre pourquoi ce qui se passe.

Quelqu'un aurait-il une explication?

source d'informationauteur Pori

15

C'est parce que vous n'êtes pas de passer une référence à ce dans l'appel de fonction JavaScript. ce dans la fonction JavaScript ne fait pas référence au même objet que dans la onClick exemple. Essayez plutôt ceci:
```
 <li onClick="foo(this)"></li>

 function foo(item){ alert(item.tagName); }
```
3

En ligne auditeur:
```
> <li onClick="alert(this.tagName)"></li>
```
L'attribut onclick valeur est effectivement enveloppé dans une fonction, et a appelé à l'élément défini au présent, par exemple,
```
function anon() {
  /* attribute value */
}

anon.call(element);
```
Quand vous mettez une fonction dans le corps, vous obtenez essentiellement:
```
function anon() {
  foo();
}
```
Ici, this dans anon sera l'élément, mais depuis foo est appelé sans paramètre thisil ne sera pas défini. Non le mode strict, this par défaut à l'objet global (window dans un navigateur). En mode strict, this à l'intérieur de foo ne sera pas défini.

Une solution est de passer d'un élément de référence pour la fonction:
```
<li onclick="foo(this)" ... >
```
puis dans la fonction:
```
function foo(callingElement) {
  ...
}
```
ou encore:
```
<li onclick="foo.call(this)" ... >

function foo() {
  var callingElement = this;
}
```
1

Comme d'autres réponses déjà dit, la valeur de this dépendra de la façon dont la fonction qui la contient est appelé. Mais depuis votre exemple est à propos de gestionnaires d'événements, je voudrais mettre en évidence ce qui cjc343 dit sur les commentaires:

Vous trouverez peut-être plus sensible si vous supprimez la ligne des gestionnaires d'événements.

C'est assez simple, en fait. Compte tenu de ce code HTML:
```
<ul id="list">
    <li id="item1">item 1</li>
    <li id="item2">item 2</li>
    <li id="item3">item 3</li>
</ul>
```
Le code JavaScript suivant prendra en compte à la fois la suppression inline gestionnaires, et par délégation:
```
var list = document.getElementById('list');
list.addEventListener('click', function(evt){
    console.log("this is the element the event is bound to: " + this.id);
    console.log("the event target is the clicked element: " + evt.target.id);
});
```
http://jsfiddle.net/J3Gje/

Qui fonctionnera sur tous les navigateurs conformes au W3C modèle d'événement, y compris IE9. Pour les anciens c'est à dire, vous devez utiliser attachEvent au lieu de addEventListeneret de faire précéder les noms d'événements avec "on". Plus de détails ici.
0

Une autre option, si vous n'avez pas à passer ce comme un param, est d'utiliser appel ou appliquer. Il est construit dans le mécanisme pour définir la valeur de ce au sein d'une fonction. Mais je tiens à souligner, l'ajout de vos gestionnaires d'événements directement dans votre code html est un peu vieillots. Vous voudrez peut-être consulter un JS cadre de l'événement délégation (jQuery Prototype Dojo YUIetc.).

violon: http://jsfiddle.net/bboone/Q2CkV/2/

HTML
```
<div onClick='alert(this.tagName);'>test</div>
<div onClick='foo.call(this);'>test2</div>
```
JS
```
function foo(){ alert(this.tagName); }
```
-1

Si vous êtes nouveau à JavaScript ne pas utiliser le this ou new mot-clé, soit parce que vous l'obtiendrez de mal ou de votre code inutilement inefficace et plus complexe. Ce que vous essayez d'accomplir, cependant, est la suivante:
```
<li onclick="foo(this)">some text</li>
```
Dans cet exemple, l'événement click de cet élément de liste déclenche une fonction nommée foo. Le this mot-clé est transmise en tant que variable. Le this mot-clé renvoie uniquement à l'entité qui a appelé la fonction en question et si il ne trouve pas cette entité, il va se référer à la window objet du navigateur. Dans ce cas, l'entité qui a appelé la fonction est l'élément de la liste nœud du DOM.

J'ai toujours penser ne jamais utiliser this mot-clé afin d'éviter ce genre de confusion est d'aller de l'avant.

EDIT: Aussi, ne pas utiliser un nom de balise bien que ce n'est pas la norme. Au lieu d'utiliser l' nodeName propriété.

Vous devez vous connecter pour publier un commentaire.