Maison  >  Article  >  interface Web  >  Explication détaillée de la différence entre ceci et l'événement en js

Explication détaillée de la différence entre ceci et l'événement en js

小云云
小云云original
2018-01-03 16:33:532045parcourir

Cet article vous propose principalement un article basé sur la différence entre this et event en js (explication détaillée). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Aujourd'hui, j'ai vu les deux formulaires de passage de paramètres de this et event dans le chapitre "Introduction à JavaScript - Événements". Parce qu'en tant que développeur front-end junior, je l'utilise généralement uniquement pour transmettre des paramètres, donc je veux vraiment comprendre quelle est la différence entre ceci et l'événement, et lequel est le plus approprié à utiliser dans quelles circonstances.

onclick = changeImg(this) vs onclick = changeImg(event)

<img src=&#39;usa.gif&#39; onclick="changeImg(event)" />
<script>
  var myImages = [
    'usa.gif','canada.gif','jamaica.gif','mexico.gif'
  ];
  function changeImg(e) {
    var el = e.target;
    var newImgNumber = Math.round(Math.round()*3);
    while(el.src.indexOf(myImages[newImgNumber]) != -1){
      el.src =myImages[newImgNumber];
    }
  }
</script>

1.this est un mot-clé dans le langage Javascript.

2.cela représente un objet interne généré automatiquement lors de l'exécution de la fonction et ne peut être utilisé qu'à l'intérieur de la fonction.

3. La différence entre ceci et event.target :

Les événements dans js bouillonneront, donc cela peut changer, mais event.target ne changera pas (lorsque l'événement est déclenché, seulement en passant la référence de l'objet événement actuel), c'est toujours l'élément DOM cible qui accepte directement l'événement

De plus, this et event.target sont tous deux des objets DOM ; jquey, vous pouvez les convertir Pour les objets jquery : $(this) et $(event.target);

Recommandations associées :

Explication détaillée du bus d'événement non- communication des composants parent-enfant dans vue

Explication détaillée de l'utilisation de addEventListener en JavaScript

Introduction détaillée aux événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn