problème avec attachEvent

chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005 - 5 févr. 2005 à 01:35
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005 - 6 févr. 2005 à 20:28

Bonjour,
attachEvent, chez IE doit permettre d'attacher plusieurs "event handler" à un élément. Cela marche bien avec "onload", mais je coince sur d'autres éléments.

<html>
<head>
<script type="text/javascript">

function chg1(x){document.links[x].style.backgroundColor="red"}

function chg2(x){document.links[x].style.backgroundColor="blue"}

// erreur : "document.links[...].style a la valeur Nulle ou n'est pas un objet"

function init(){
for(var i=0; i < document.links.length; ++i){
document.links[i].attachEvent("onmouseover",function(){chg1(i)});
document.links[i].attachEvent("onmouseout",function(){chg2(i)});
}
}

window.attachEvent("onload",init);
</script>
</head>

[# lien]
[# lien]
[# lien]
[# lien]

</html>

Si j'enlève la boucle, ça fonctionne ?? :

function init(){
i=0 // ici sur le premier lien
document.links[i].attachEvent("onmouseover",function(){chg1(i)});
document.links[i].attachEvent("onmouseout",function(){chg2(i)});
}

Il doit y avoir une solution sans faire une usine à gaz? Merci d'avance pour votre aide.

3 réponses

Réponse 1 / 3

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
5 févr. 2005 à 09:42

Bonjour,

il ne faudrait pas utiliser this ?
document.links[i].attachEvent("onmouseover",function(){chg1(this)});

j'ai un exemple "équivalent"

document.getElementById("toto"+i).setAttribute("onmouseover",
function(){chg1(this);});

Cordialement. Bul. ~Site~~[mailto:marcelBultez@tiscali.fr Mail]~

Réponse 2 / 3

chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
6 févr. 2005 à 16:35

Merci Bultez pour ta réponse, mais elle équivaut à
document.links[i].onmouseover = function(){chg1(i)

La nouvelle valeur de l'attribut remplace la précédente, par contre, avec
attachEvent, ou addEventListener pour le DOM 2,
la valeur originelle n'est pas écrasée.
Voici un autre exemple:

<html>
<head>
<script type="text/javascript">

function chg1(x){document.links[x].style.backgroundColor="red";}
function chg2(x){document.links[x].style.color="white"}
function chg3(x){document.links[x].style.border="5px solid green"}

/*
function init(){
for(var i=0; i < document.links.length; ++i){
document.links[i].attachEvent("onmouseover",function(){chg1(i)});
document.links[i].attachEvent("onmouseover",function(){chg2(i)});
document.links[i].attachEvent("onmouseover",function(){chg3(i)});
}
}
// erreur : "document.links[...].style a la valeur Nulle ou n'est pas un objet"
*/
function init(){
i=0 // ici sur le premier lien
document.links[i].attachEvent("onmouseover",function(){chg1(i)});
document.links[i].attachEvent("onmouseover",function(){chg2(i)});
document.links[i].attachEvent("onmouseover",function(){chg3(i)});
}

window.attachEvent("onload",init);
</script>
</head>

[# lien]
[# lien]
[# lien]
[# lien]

</html>

Sans la boucle, ça fonctionne ?? :

Réponse 3 / 3

chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
6 févr. 2005 à 20:28

J'ai trouvé sans pouvoir l'expliquer, et voici la version IE/Gecko DOM 2

<html>
<head>
<script type="text/javascript">

function init(){
for(var i=0; i < document.links.length; ++i){
with(document.links[i]){
if(document.attachEvent){ // IE 5+
attachEvent("onmouseover",function(){style.backgroundColor="blue";});
attachEvent("onmouseover",function(){style.color="white"});
attachEvent("onmouseout",function(){style.backgroundColor="white";style.color="blue"});
}
if (document.addEventListener){// DOM 2, NS6+
addEventListener("mouseover",function(){style.backgroundColor="blue";},true);
addEventListener("mouseover",function(){style.color="white"},true);
addEventListener("mouseout",function(){style.backgroundColor="white";style.color="blue"},true);
}
}
}
}
if(document.attachEvent)window.attachEvent("onload",init);
else window.addEventListener("load",init,true);
</script>
</head>

[# lien]
[# lien]
[# lien]
[# lien]

</html>

Votre réponse