encapsulation d'objets

Version imprimable

Bonjour,

J'aimerais utiliser l'encapsulation d'objets pour créer un objet qui va être utiliser pour gérer la compatibilité d'addEventListener et de attachEvent.

Le but c'est qu'à chaque fois que je vais créer un évènement, je vais utiliser un seul et même objet qui va gérer tout seul les problèmes de compatibilités entre IE et Mozilla, ce qui évitera les répétitions dans le code.

J'ai écris un script mais je suis pas sûr de sa bonne syntaxe, surtout qu'il ne fonctionne pas. J'aimerais savoir ce qui cloche SVP :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 /* - initialisation de la variable 'myDeclaration' - si l'objet détecté par le navigateur est addEventListener : utiliser cette syntaxe, avec les 3 paramètres de la fonction - si c'est IE : utiliser cette syntaxe, sans le 3ème paramètre car attachEvent ne le permet pas */ var sameEventTrigger = function(evenement, fonction, diffusion) { var myDeclaration = ''; if (event.addEventListener) { myDeclaration = addEventListener(evenement, fonction, diffusion); } else if (event.attachEvent) { myDeclaration = attachEvent(evenement, fonction); } return myDeclaration; } // instanciation de l'objet, avec des valeurs en paramètres var eventImage = new sameEventTrigger('click', imgAlert, false); // fonction appelée par eventImage function imgAlert() { var img = document.getElementsByTagName('img'); alert(img); }
Code:

<img src="desert.jpg" alt="Désert" title="Désert" />

Merci.

Code:

1
2
3
4
5
6
7
function declencheur(cible, condition, effet) {
   if (cible.addEventListener) cible.addEventListener(condition, effet, false);
   else if (cible.attachEvent) cible.attachEvent("on" + condition, effet);
}
 
var elementCible = document.getElementById("idDeTonElement")
declencheur(elementCible, "click", function() {alert("coucou");});

... fera une alerte "coucou" à chaque clic, quel que soit le navigateur.

02/01/2011, 15h40
chok371

Merci, mais le code ne fonctionne pas.
02/01/2011, 18h26
RomainVALERI

Citation:

Envoyé par chok371

Merci, mais le code ne fonctionne pas.

Merci, mais cette phrase ~~n'a aucun sens.~~ n'est pas assez claire ;)

Tu peux préciser ? :roll:
Et même plus que préciser : montre-nous l'extrait de code qui "ne fonctionne pas" ...
02/01/2011, 20h04
chok371

Je ne vois pas d'où vient le problème.
02/01/2011, 20h07
Bovino
Code:

var sameEventTrigger = function(evenement, fonction, diffusion)

Code:

if (event.addEventListener)

event, c'est quoi ? :aie:
D'après le nom, on pourrait penser que c'est l'événement, mais dans ce cas, pas étonnant que "ça marche pas" puisque addEventListener, tout comme attachEvent s'applique à un élément HTML ;)

Citation:

Le but c'est qu'à chaque fois que je vais créer un évènement, je vais utiliser un seul et même objet qui va gérer tout seul les problèmes de compatibilités entre IE et Mozilla, ce qui évitera les répétitions dans le code.

Le problème c'est que dans ta façon de faire, tu crées pour chaque événement une nouvelle instance de ton objet ce qui n'a aucun intérêt à part encombrer la mémoire...
Code:

1 2 3 4 function imgAlert() { var img = document.getElementsByTagName('img'); alert(img); }
Le "s" de getElementsByTagName ne correspond ni à une lubie ni à une farce des concepteurs de JavaScript mais au fait que la méthode renvoie une collection d'objets HTML, tu dois donc spécifier sur quel élément tu veux travailler.

Citation:

Merci, mais le code ne fonctionne pas.

Pour peu que tu adaptes certains paramètres du code à ta page, le code proposé par Romain est tout à fait correct :roll:

Citation:

event, c'est quoi ?
D'après le nom, on pourrait penser que c'est l'événement, mais dans ce cas, pas étonnant que "ça marche pas" puisque addEventListener, tout comme attachEvent s'applique à un élément HTML

je croyais qu'AEL faisait partie de l'objet event, donc pour moi c'était "est ce que le navigateur détecte la méthode AEL de l'objet event"

Citation:

Le problème c'est que dans ta façon de faire, tu crées pour chaque événement une nouvelle instance de ton objet ce qui n'a aucun intérêt à part encombrer la mémoire...

ok, mais si il y a plus d'objet, c'est toujours de l'encapsulation ?

Citation:

Pour peu que tu adaptes certains paramètres du code à ta page, le code proposé par Romain est tout à fait correct

je l'ai fait mais j'ai du oublier quelque chose (p-e le windos.onload ?).

voici le code complet :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Encapsulation</title> <script type="text/javascript"> /* - si l'objet dÃ©tecte par le navigateur est addEventListener : utiliser cette syntaxe, avec les 3 paramï¿½tres de la fonction - si c'est IE : utiliser cette syntaxe, sans le 3Ã¨me paramÃ¨tre car attachEvent ne le permet pas */ function declencheur(cible, condition, effet) { if (cible.addEventListener) cible.addEventListener(condition, effet, false); else if (cible.attachEvent) cible.attachEvent("on" + condition, effet); } var elementCible = document.getElementById("idDeTonElement") declencheur(elementCible, "click", function() {alert("coucou");}); </script> </head> <body> <img src="desert.jpg" alt="DÃ©sert" title="DÃ©sert" id="idDeTonElement" /> </body> </html>
merci

Citation:

Envoyé par chok371

... j'ai du oublier quelque chose (p-e le windos.onload ?). ...

Oui a priori ce n'est que ça :)
Au moment ou le script inclus dans <head> est interprété, le DOM de la page n'est pas encore dispo, donc le getElementById échoue et le gestionnaire n'est appliqué à rien...

Place l'attribution du gestionnaire à ton élément (comme tu semblais le deviner déjà vu ta remarque) dans le gestionnaire window.onload, par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Encapsulation</title> <script type="text/javascript"> /* - si l'objet dÃ©tecte par le navigateur est addEventListener : utiliser cette syntaxe, avec les 3 paramï¿½tres de la fonction - si c'est IE : utiliser cette syntaxe, sans le 3Ã¨me paramÃ¨tre car attachEvent ne le permet pas */ function declencheur(cible, condition, effet) { if (cible.addEventListener) cible.addEventListener(condition, effet, false); else if (cible.attachEvent) cible.attachEvent("on" + condition, effet); } declencheur(window, "load", function() { var elementCible = document.getElementById("idDeTonElement"); declencheur(elementCible, "click", function() {alert("coucou");}); }); </script> </head> <body> <img src="desert.jpg" alt="DÃ©sert" title="DÃ©sert" id="idDeTonElement" /> </body> </html>
Et ensuite si, comme c'est probable, tu as d'autres gestionnaires à attribuer et autres choses à initialiser, fais-toi une fonction initialiser() que tu appelles sur le window.onload, dans laquelle tu placeras l'ensemble de tes traitements...

Tiens-nous au jus :)

03/01/2011, 02h10
chok371

C'était bien ça merci !:ccool: