Attacher une fonction avec THIS sur un evenement en DOM

Marsh Posté le 23-11-2007 à 10:11:44

Bonjour à Tous,

Voici le code sur lequel j'ai un petit soucis, comme vous le voyez il est à la fois fait pour IE et pour Firefox, mais le probleme ne vient pas de la, il s'agit des fonctions que je souhaites attacher aux evenements de souris click, mouseover et mouseout.
Les fonctions seront clic(objet), rollover(objet) et rollout(objet)

Code :

if (typenavigateur == "IE" ) {
if (spanCelluleListe[i].attachEvent) {alert("attachEvent OK" );} else {alert("attachEvent PAS OK" );}
// attachEvent = IE
spanCelluleListe[i].attachEvent("onclick", clic(spanCelluleListe[i]) );
spanCelluleListe[i].attachEvent("onmouseover", rollover(spanCelluleListe[i]) );
spanCelluleListe[i].attachEvent("onmouseout", rollout(spanCelluleListe[i]) );
}
if (typenavigateur == "FF" ) {
if (spanCelluleListe[i].addEventListener) {alert("addEventListener OK" );} else {alert("addEventListener PAS OK" );}
// addEventListener = Firefox
spanCelluleListe[i].addEventListener("click", clic(spanCelluleListe[i]),false);
spanCelluleListe[i].addEventListener("mouseover", rollover(spanCelluleListe[i]),false);
spanCelluleListe[i].addEventListener("mouseout", rollout(spanCelluleListe[i]),false);
}

Et avant que ce code soit mis en DOM, ces fonction etaient attachées de la sorte :

Code :

<SPAN class="cellule" title="English" onclick="javascript:clic(this);" onmouseover="javascript:rollover(this);" onmouseout="javascript:rollout(this);">

Comme vous le voyez, l'objet saisie en parametre est THIS, c'est là que se situe le probleme, comment lui passer THIS dans les premieres fonction ??? j'ai essayer de mettre this = non reconnu et de mettre l'objet directement (spanCelluleListe[i]) marche pas non plus....

Comment s'y prendre ?

Remarque : j'essaye de faire un code "non memory leak" donc j'evite les fonction inline ( function() { machin } )
à même le parametrage... Elles sont definies en dehors du bloc de code ---- En d'autres termes, je VEUX eviter les closures

Message édité par NounouRs le 23-11-2007 à 11:02:06

Reply

Marsh Posté le 23-11-2007 à 10:11:44

Reply

Marsh Posté le 23-11-2007 à 11:01:40

vaste sujet !

Je te conseil de te tourner vers des libs comme prototype.js où c'est géré directement, sachant que la méthode utilisée est de faire une "closure".

Regarde particulièrement du coté des fonctions Observe, ainsi que bindAsEventListener, dont voici le code, pour te faire une idée

Code :

Function.prototype.bindAsEventListener = function(object) {
var __method = this, args = $A(arguments), object = args.shift();
return function(event) {
return __method.apply(object, [( event || window.event)].concat(args).concat($A(arguments)));
}
}

---------------
We deserve everything that's coming...

Reply

Marsh Posté le 23-11-2007 à 11:09:42

arf j'avais pas tout capté !!

Donc pour info, l'objet this est correctement transmis pour FF, càd que dans la fonction qui est appellée par l'evenement, le this pointera sur l'element qui a émis cet evenement, mais pas pour IE ! Tu peux feinter au pire en faisant :

Code :

var e = e || window.event;
var pthis = (e.target || e.srcElement);

sachant que e est passé en params dans le cadre des fonctions DOM2 correctement implémentée, tu l'as directement toujours en tant que premier arguments de ta fonction. Mais pour IE il considere que this est le document (ou window je sais plus...), ce qui est forcément moyen...

Bref en passant comme dit plus par un systeme de closure, le soucis se régle car le scope est transmis au meme temps que la fonction est appellée, et l'objet courant avec (par contre pour les leaks c à voir ...)

qq infos en plus : http://www.quirksmode.org/js/introevents.html

Message édité par SICKofitALL le 23-11-2007 à 11:12:33

---------------
We deserve everything that's coming...

Reply

Attacher une fonction avec THIS sur un evenement en DOM

Sujets relatifs:

Leave a Replay