Discussion :

[chok371]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci.

[RomainVALERI]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[chok371]

Merci, mais le code ne fonctionne pas.

[RomainVALERI]

Merci, mais le code ne fonctionne pas.

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

Tu peux préciser ?
Et même plus que préciser : montre-nous l'extrait de code qui "ne fonctionne pas" ...

[chok371]

Je ne vois pas d'où vient le problème.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var sameEventTrigger = function(evenement, fonction, diffusion)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (event.addEventListener)

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

[chok371]

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"

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 ?

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[RomainVALERI]

... 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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[chok371]

C'était bien ça merci !