Discussion :

[Coocky10]

Bonjour

Voilà mon site contient plusieurs DIV auxquelles j'aimerais stocker des informations sur l'action à mener en fonction d'un événement sur ce DIV.

il y a donc l'événement en lui même, l'action à effectuer et une condition et ces 3 éléments peuvent être multipliés par autant d'événement d'action ou de condition que je souhaite associer au DIV.

J'ai donc la possibilité de créer un tableau contenant plusieurs tableau associatifs lesquels contiendrait les 3 éléments "événement, action, condition" et bien sure l'identifiant du DIV pour pouvoir retrouver ces informations en fonction du DIV.

Cela m'oblige à boucler dans le tableau à chaque fois pour lire les informations stockées.

Autre possibilité

Celle de stocker les informations sous forme d'attributs dans mon DIV, certe je n'ai pas la possibilité de stocker un tableau dans un attribut mais je peux écrire quelque chose comme cela.

Code :

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

1
2
3
4
 
Div.setAttribute("Event", "mouseMove,mouseOut,mouseDown");
Div.setAttribute("Cond", "true,true,true");
Div.setAttribute("DIVID=DIV_LEFT:BackgroundColor=F0F0F0,DIVID=DIV_LEFT:BackgroundColor=FFFFF0,DIVID=DIV_LEFT:BackgroundColor=0F0F0F"

un split sur chaques attributs par la virgule me permettant de récupérer chaque éléments.

Quel solution vous semble la mieux ou y a t'il une autre approche possible (par exemple par le dataset ?), merci à vous pour vos avis.

[sekaijin]

tout cela est bien compliqué pourquoi ne pas simplement y placer les trois fonctions
ça prends pas plus de temps c'est lisible et ça ne demande pas du code à côté pour interpréter les attributs

Code :

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

1
2
3
Div.onmousemove = function() {if (true) getElementById('DIV_LEFT').style.BackgroundColor="#F0F0F0";};
Div.onmouseout  = function() {if (true) getElementById('DIV_LEFT').style.BackgroundColor="#FFFFF0";};
Div.onmousedown = function() {if (true) getElementById('DIV_LEFT').style.BackgroundColor="#0F0F0F";};

sinon simplement utiliser les membres des éléments

Code :

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

1
2
3
4
5
Div.events = [
  {event : "mouseMove", cond: true, divId: 'DIV_LEFT' , BackgroundColor :'F0F0F0'},
  {event : "mouseOut",  cond: true, divId: 'DIV_LEFT' , BackgroundColor :'FFFFF0'},
  {event : "mouseDown", cond: true, divId: 'DIV_LEFT' , BackgroundColor :'0F0F0F'}
];

tu y as accès avec

Code :

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

console.log(Div.events[0].event);

si tu tiens absolument à un attribut

Code :

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

1
2
3
4
5
Div.dataset.events = JSON.stringify([
  {event : "mouseMove", cond: true, divId: 'DIV_LEFT' , BackgroundColor :'F0F0F0'},
  {event : "mouseOut",  cond: true, divId: 'DIV_LEFT' , BackgroundColor :'FFFFF0'},
  {event : "mouseDown", cond: true, divId: 'DIV_LEFT' , BackgroundColor :'0F0F0F'}
]);

accès avec

Code :

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

1
2
var events = JSON.parse(Div.dataset.events);
console.log(events[0].divId);

A+JYT

[Coocky10]

Merci pour ces réponses.

Du côté des fonctions je ne suis pas chaud, car c'était juste un exemple il faudrait adapter mes fonctions pour tout les cas, et je ne tiens pas à créer une fonction pour chaque type d'événements non plus.

Par contre l'utilisation des membres des éléments tel que tu le présente me plais bien je ne savais pas qu'on pouvait faire ainsi, je vais le tester car cela correspond pleinement à ma vision de ce que je souhaite faire.

Merci encore.

[SylvainPV]

je ne tiens pas à créer une fonction pour chaque type d'événements non plus.

C'est précisément le but d'une fonction que d'éviter ce genre de répétitions. En JavaScript, une fonction est une variable comme une autre, on peut la passer en argument de plusieurs event listeners et on peut créer des fonctions à la demande si nécessaire. Crois-en mon expérience, une bonne décomposition fonctionnelle est la solution à 99% des problèmes, et bien moins hasardeux que cette collection d'objets arbitraires censés représenter la logique applicative.

Pour ce qui est de stocker des informations sur des éléments, une combinaison de classes sur tes éléments HTML devrait suffire à décrire leur comportement respectif. Une fois identifiables et identifiés, ils n'ont pas pour vocation à stocker davantage d'informations, et encore moins des règles logiques.

[sekaijin]

C'est précisément le but d'une fonction que d'éviter ce genre de répétitions. En JavaScript, une fonction est une variable comme une autre, on peut la passer en argument de plusieurs event listeners et on peut créer des fonctions à la demande si nécessaire. Crois-en mon expérience, une bonne décomposition fonctionnelle est la solution à 99% des problèmes, et bien moins hasardeux que cette collection d'objets arbitraires censés représenter la logique applicative.

Pour ce qui est de stocker des informations sur des éléments, une combinaison de classes sur tes éléments HTML devrait suffire à décrire leur comportement respectif. Une fois identifiables et identifiés, ils n'ont pas pour vocation à stocker davantage d'informations, et encore moins des règles logiques.

+1

[melka one]

jour

il y a aussi l'attribut type de l'objet event qui renseigne su l’évènement déclencheur

Code :

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

1
2
3
4
function unefonction(evt){
 
alert(evt.type)
}

[Coocky10]

C'est précisément le but d'une fonction que d'éviter ce genre de répétitions. En JavaScript, une fonction est une variable comme une autre, on peut la passer en argument de plusieurs event listeners et on peut créer des fonctions à la demande si nécessaire. Crois-en mon expérience, une bonne décomposition fonctionnelle est la solution à 99% des problèmes, et bien moins hasardeux que cette collection d'objets arbitraires censés représenter la logique applicative.

En fait je vais expliquer un peu plus en détail, tous mes événements sont gérer dans une seule fonction.

Code :

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

1
2
3
4
5
6
 
function Affect_Window()
{
    window.addEventListener("click", SeqEvent);
    window.addEventListener("mouseover", SeqEvent);		
    //etc sur tous les événements utiles à mon projet.

Code :

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

1
2
3
4
5
6
7
 
function SeqEvent(evt)
{
 
		var _Target =  evt.target;
		var _TypeEvt = evt.type;
//etc..

Ainsi je récupère l'objet target si c'est un div je récupère les événements que j'ai liés ou stockés dans ce div (sujet de la discussion), si le type d'événement correspond je test ma condition et si cette condition est vrai j'exécute la ou les actions concernées.

Ainsi tous mes événements sont rattachés à chaque div sous forme de paramètres et je peut ainsi gérer une multitude d'action conditionnées et en fonction de tout type d'événement sans alourdir mon programme.

Code qui me parais assez simple à gérer, modulable et pas vraiment compliqué enfin pour moi.

De plus ces données d'événement viendront à terme d'une source extérieur, fichier XML ou base de données, d'ou le principe de paramètres associés à un objet DIV.
Toute le site sera gérer par une simple lecture d'une base de donnée ou d'un fichier XML et un code qui ne bougera pas.

[SylvainPV]

J'ai pas l'impression que ce soit une si bonne idée de faire une application dont les règles d'interaction seraient stockées dans une BDD. En fait je trouve ça même complètement barré. Mais bon, j'ignore ton besoin et après tout, tu fais ce que tu veux.

Par contre, si tu tiens à stocker les paramètres dans les éléments HTML eux-mêmes (je rappelle qu'ils ne sont pas faits pour ça), pourquoi utiliser des évènements délégués partout ? Le seul intérêt des évènements délégués est justement de se libérer des références aux éléments HTML, afin de ne pas réassigner manuellement les listeners.