0
votes

Que signifie "onload = foo (event)"?

Je suis nouveau dans JS et j'ai trouvé cette section de code:

<body>
    <span id="sp1">
        <img src="aurora.gif" onload="ev1(event)">
    </span>        
</body>

Pour autant que je sache, l'attribut onload est déclenché si l'ensemble du document HTML a terminé "le chargement ".
Mais je ne comprends pas vraiment ce qui est passé à la fonction ev1 si l'attribut onload est déclenché. Qu'est-ce que l ' événement dans ce cas?

Voici le code source

javascript onload

0 commentaires

3 Réponses :

1
votes

img a également l'attribut onload & est appelé lorsque l'image a fini de se charger. De même, il a également un gestionnaire d'événements onerror . event représente l'objet événement.

<img src='https://i.redd.it/xbq78cnv2nr21.jpg' onload='ev1(event)'>

img {
  width: 200px;
  height: 200px;
}

function ev1(e) {
  console.log(e)
  console.log('Img loaded')

}

2 commentaires

donc ce serait équivalent à écrire ev1 (this) ? L'événement est-il essentiellement l'image?

@Lavair - Non. ceci est le HTMLImageElement . event est l'objet événement de l'événement load . (Cependant, event.target et event.currentTarget seront les HTMLImageElement .)

0
votes

Cela semble être une tentative de réussite de l ' Event Objet comme argument d'une fonction appelée ev1 .

Au lieu d'utiliser un événement en ligne, le développeur ~~auteur~~ aurait dû utiliser un événement JavaScript , comme ceci.

document.querySelector("img").addEventListener("load", event => {
  console.log(event);
});

Bonne chance.

7 commentaires

Il n'y a rien de mal avec les événements en ligne, mais il est préférable de séparer votre HTML / CSS / JavaScript, ce qui est fait pour améliorer la maintenabilité.

"Je ne sais pas si cela fonctionne ou non ..." Oui, même sur les navigateurs non-IE.

Pour plus d'informations, lisez cette réponse sur cette question .

Même dans Angular, vous avez cette variable spéciale $ event

@ T.J.Crowder Merci d'avoir clarifié cela, j'ai écrit cela parce que je n'utilise jamais de scripts en ligne.

@LogicalBranch - Il est très judicieux de ne pas utiliser les gestionnaires d'événements de style attribut onxyz . :-) Cela dit, load sur une img est l'un des rares endroits où il est probablement moins sujet aux erreurs que ce que beaucoup de gens feraient à la place.

Cet extrait de code provient d'un exploit IE6, il n'y avait pas de querySelector à l'époque

3
votes

Il connecte un gestionnaire à l'événement load de l'image et passe l'objet événement pour l'événement au gestionnaire. L'objet event existe de manière fiable entre les navigateurs dans le contexte du gestionnaire d'événements de style attribut onload : Sur IE, c'est un global; sur Firefox, c'est un local dans une fonction synthétique créée pour le gestionnaire onload ; sur Chrome, je pense que c'est les deux . :-)

Notez que la fonction ev1 doit être globale, ce qui est l'une des nombreuses raisons de ne pas utiliser les gestionnaires d'événements de type onxyz -attribute.

2 commentaires

Donc event est fondamentalement un objet vide de type EventObject qui existe automatiquement lorsque l'attribut onload est déclenché? Ou vous ai-je mal compris?

@Lavair - Ce n'est pas vide, c'est un objet d'événement normal pour un événement load sur img .