11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour
Je teste la gestion des événements. Pour cela j'essaie un exemple trouvé dans http://www.aidejavascript.com/article143.html


window.onload = function() {alert("Salut !");};
window.addEventListener('load', function() {
   this.style.backgroundColor="#ffffff";
}, false);

la prfemière fonction anonyme ne pose pas de problème. Par contre pour la seconde, une erreur javascript apparait disant "Erreur : this.style has no properties".
J'ai donc essayé avec d'autres objets appelant comme document ou d'autres événements comme click. Mais même erreur.
Que n'ai je pas compris ?
Merci
Modifié par coucou (26 Jan 2007 - 18:37)
Administrateur
je présume que this fait référence au mauvais objet (c'est à dire pas au tag body du document). un petit alert(this); pourra t'en convaincre Smiley cligne
Salut,
coucou a écrit :
la prfemière fonction anonyme ne pose pas de problème. Par contre pour la seconde, une erreur javascript apparait disant "Erreur : this.style has no properties".
C'est plutôt normal, puisque dans le second cas "this" réfère à l'objet "window", qui n'a pas de propriété "style".

Par contre, ceci devrait marcher :
[b]HTML :[/b]
<a href="#" id="lienTest">Test</a>

[b]JavaScript :[/b]
window.onload = function() {
   var lien = document.getElementById("lienTest");
   lien.addEventListener('click', function() {
      this.style.backgroundColor = "red";
   }, false);
};
N.B. : "addEventListener" ne fonctionne pas sous IE.

<edit>Comment dit-on, déjà ? Ah oui, grillé...</edit>
Modifié par Julien Royer (12 Jan 2007 - 14:46)
a écrit :

N.B. : "addEventListener" ne fonctionne pas sous IE.

<edit>Comment dit-on, déjà ? Ah oui, grillé...</edit>

surtout en ces temps de réchauffement de la planète.

A part ça, il est vrai que ton exemple fonctionne. Mais pourquoi avec l'objet document, qui lui dispose d'un style, la fonction me sort une erreur ?
merci en tous cas pour ton exemple

a écrit :

je présume que this fait référence au mauvais objet

oui bien sur. this est l'objet window (ou document si je change).
Julien Royer a écrit :
N.B. : "addEventListener" ne fonctionne pas sous IE.


attachEvent est l'équivalent IE na ?
Remarque au passage : attachEvent sur IE ne supporte pas l'utilisation du this... bug connu de longue date mais tout le monde s'en fout, surtout les développeurs d'IE
Olivier a écrit :
attachEvent est l'équivalent IE na ?
Oui.

Comme le dit QuentinC, une différence très gênante est le fait que "this" pointe vers l'objet "window" avec "attachEvent". C'est toujours le cas avec IE 7, je viens de tester.