Problème avec les Event Listener

Hi all !

J'ai actuellement un petit souci avec l'implémentation des Event Listener.

En fait j'ai décidé de mettre au JS clean et bien propre (séparer la gestion dynamique de la forme, tout comme on doit toujours séparer le fond de la forme )

J'ai lu plusieurs tuto, dont celui d'Alsacreations ( http://css.alsacreations.com/Tutoriels-JavaScript/La-gestion-des-evenements-en-JavaScript )

Je pense avoir bien saisi le concept (et l'intérêt) dans son ensemble, mais au niveau du code ça coince encore un peu.

window.onload = function ()
{
  initialisationGlobale();
}

function initialisationGlobale()
{
	var lienThemeAir = document.getElementById('air');

	lienThemeAir.addEventListener('onmouseover', selectionTheme('air'), false);
	lienThemeAir.addEventListener('onmouseout', selectionTheme('n_def'), false);

}

Voilà le topo : je veux attacher un Event Listener à l'élément identifié par l'id 'air', seulement, arrivé au premier addEventListener, la console d'erreur de FF me balance ça

a écrit :

Error: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///D:/js/splash.js :: initialisationGlobale :: line 22" data: no]

Je sèche un peu, quelqu'un saurait-il m'aider ?

Salut ANViL,

il faut remplacer onmouseover par mouseover et onmouseout par mouseout .

A+

Ah oui effectivement, j'avais oublié ce petit détail

Ceci dit, même corrigé, j'ai toujours le problème

ANViL a écrit :
Ceci dit, même corrigé, j'ai toujours le problème

Alors il faudrait voir une page en ligne (ou à défaut tout le code).

window.onload = function ()
{
  initialisationGlobale();
}


function initialisationGlobale()
{
	var lienThemeAir = document.getElementById('air');
	
	lienThemeAir.addEventListener('mouseover', selectionTheme('air'), false);
	lienThemeAir.addEventListener('mouseout', selectionTheme('n_def'), false);
	
}


function selectionTheme(nomTheme)
{
	modifierBackgroundApercu(nomTheme.toLowerCase());
}


function modifierBackgroundApercu(nomTheme)
{
[...]
}

Le parser me crache le message d'erreur sus-mentionné lorsqu'il tombe sur cette ligne :

a écrit :
lienThemeAir.addEventListener('mouseover', selectionTheme('air'), false);

P.S: normalement si tu essayes d'inserer ce code dans une page, même si tu ne l'utilise pas, le parser devrait également afficher l'erreur.
Modifié par ANViL (26 Jan 2008 - 21:35)

Tu as bien un élément avec un id="air" dans ton code html ?

bon je decouvre alors taper pas si je dis des bétises. je suis d'ailleurs interesser de voir que ce truc que je connaissais sous java existe aussi en javascript.

j'ai regardé plusieurs exemples sur le net et la syntaxe ne serait-elle pas plutôt

lienThemeAir.addEventListener('mouseover', selectionTheme, false);

?

avec une fonction selectionTheme sans argument et le fait que ce soit 'air' ne se tirerait-elle pas du fait que l'on appelle cette fonction sur l'objet lienThemeAir?


bon ce n'est qu'une question je vais en lire plus et j'effacerais ces aneries si s'en sont.
Modifié par CPascal (26 Jan 2008 - 22:08)

CPascal a écrit :
lienThemeAir.addEventListener('mouseover', selectionTheme, false);

Tout juste !

Heyoan a écrit :
Tu as bien un élément avec un id="air" dans ton code html ?

oui

CPascal a écrit :
bon je decouvre alors taper pas si je dis des bétises. je suis d'ailleurs interesser de voir que ce truc que je connaissais sous java existe aussi en javascript.

j'ai regardé plusieurs exemples sur le net et la syntaxe ne serait-elle pas plutôt

lienThemeAir.addEventListener('mouseover', selectionTheme, false);

?

avec une fonction selectionTheme sans argument et le fait que ce soit 'air' ne se tirerait-elle pas du fait que l'on appelle cette fonction sur l'objet lienThemeAir?

Oui effectivement, mais c'est p-e ce que je ne comprenais pas dans les tutos que j'ai lu :

- le nom de la fonction doit être écrit sans argument, soit

- mais dans ce cas comment faire lorsqu'on doit absolument passer un argument à la fonction ?

ANViL a écrit :
mais dans ce cas comment faire lorsqu'on doit absolument passer un argument à la fonction ?

element.addEventListener('click', function() { mafonctionquejai(param1, param2);}, false);
Modifié par Heyoan (26 Jan 2008 - 22:26)

bon c'est un peu tot pour te repondre au vue de mon habitude actuelle a faire de l'objet mais il me semble qu'on doit pouvoir s'arranger sans passer d'argument.

bien qu'en fait il y est un argument c'est l'objet sur lequel va agir le listener.

c'est sur lui que les chose vont agir.

si c'est comme en java de plus tu as peut-etre un argument implicite qui est le type d'evenement qui as eu lieu.

dans ce cas il doit pouvoir s'ecrire dans la fonction selectiontheme si e.eventtype = "mouseover" faire ceci sur le truc d'id='air'
si e.eventtype = "mouseout" faire cela

bon mais la c'est encore une supposition de ma part. ne tenir donc aucun compte des la syntaxe e.eventtype qui est completement imaginatoire ...

bon a + peut-être. si j'ai le courage de lire les tutos jusqu'au bout....

ah oui ou une fonction anonyme comme le propose heyoan. +1

Merci pour les réponses

Avant d'aller plus loin, je me demandais s'il fallait que je remette en cause la manière de programmer en JS

Je programme uniquement en procédural (ça me suffit pour ce que j'implémente en JS, et le besoin de passer à l'OO ne m'a jamais frappé), et c'est p-e pour cette raison que j'ai du mal à me lancer dans l'implémentation des Event Listener

@CPascal :

A te lire (même si ton expérience vient du Java), j'ai l'impression que je devrais tout programmer en OO

@Heyoan :

Une fonction anonyme fonctionne, c'est vrai (ceci dit à part en JS, je n'ai jamais utilisé ce genre de déclaration, est-ce une approche valable, ou bien est-ce une entorse aux modèles de programmation classiques ?)
Modifié par ANViL (27 Jan 2008 - 11:01)

salut,

oh la la ......oh my god ....

qu'ai-je fais? j' ai convaincu un pauvre programmeur procédural de ce mettre a la poo pur?

moi qui est abandonné le java pour me plonger dans les delices du php procédural....

snif snif..... attention quand même a ne pas te perdre dans le piege de la poo. ça devient vite trés vite plus compliqué que nécessaire.

enfin peut-être quand javascript la pillule passe mieux...

sinon pour repondre a ta question sur les fonctions anonyme. si j'en croyais mes profs du temps de la fac: c'est la classe et ça n'est que trop méconnu. c'est du moins ce qu'on m'a dit.
Modifié par CPascal (27 Jan 2008 - 12:16)

Me revoilà

Pour en revenir à mon problème, j'ai essayé d'implémenter le passage de paramètre via une fonction anonyme, mais sans succès (je n'avais plus accès à l'event au sein de la fonction appelée ).

Après quelques recherches, j'ai trouvé ceci :

-> assigner un attribut au noeud désiré via

element.setAttribute('nom_attribut', 'valeur');

-> et au sein de la fonction appelée, récupérer la valeur via

evt.target.getAttribute('nom_attribut');

// où evt est le nom de l'évenement récupéré, on aurait aussi pu écrire this à la place

Ca fonctionne, mais j'aimerais avoir votre avis sur la propreté de cette façon de faire.

Salut,

je pense que ta façon d'aborder l'écriture d'un code javascript propre devrait passer par le choix d'un framework. Tout simplement parce que l'ecriture du code est grandement simplifiée et qu'un jour tu vas le decouvrir et tu devras encore changer ta façon d'ecrire le javascript.

Sais tu par exemple que la méthode addEventListener n'existe pas du tout sous IE? et qu'elle est remplacée par attachEvent...

Personnellement j'utilise le framework js mootools, j'ai fait ce choix car c'est le premier que j'ai decouvert et qu'il est a mon sens léger et performant mais il en existe d'autres : JQuery, prototype, dojo, ...

Bref tout ça pour dire que mon conseil est d'en choisir un, de regarder un peu la doc et les exemples et tu verras que ca va eluder beaucoup de soucis liés au js et que le développement en sera plus confortable.

Avec mootools, ton code ressemblerai a ça:

function modifierBackgroundApercu(nomTheme){
[...]
}

window.addEvent('domready',function(e){
  $('air').addEvents({
    'mouseover' : function(e){
      //"e" est l'evenement courant traité ici
      //l'objet cible de l'evenement est accessible dans cette fonction par le mot clé "this"
      modifierBackgroundApercu('air');
    },
    'mouseout' : function(e){
      modifierBackgroundApercu('n_def');
    }
  });
});

De plus, en réponse a ta derniere question , on ne peut pas mettre n'importe quel attribut à un noeud du DOM Html tout d'abord car cela brise les contraintes de la DTD et que je ne suis pas sur que ca fonctionne sur tout les navigateurs...
Modifié par skywalk3r (28 Jan 2008 - 10:04)

Hello sky, et merci pour ta participation

Pour ta remarque concernant la compatibilité avec IE, je suis parfaitement au courant, mais j'ai pris pour habitude de ne me préoccuper des spécificités de ce cauchemar de browser qu'en dernier lieu

Concernant l'utilisation d'un framework, j'y avais déjà songé, mais je n'ai jamais franchi le pas (mais peut-être était-ce un tord ).

Ceci dit, à lire le code relatif @mootools, je me dis qu'une bonne lecture de la doc serait nécessaire avant de se lancer

Par contre utiliser un framework revient à se familiariser avec un environnement de développement, ça peut être extrêmenent productif, mais si d'un jour à l'autre le support dudit framework était arrêté ? (il faudrait changer de crêmerie, ré-apprendre avec un autre framework etc)

L'ajout d'attribut(s) viole effectivement les contraintes de la DTD, mais étant donné que l'utilisation d'une fonction anonyme ne fonctionnait pas, c'est tout ce que j'avais trouvé.

P.S: en observant le code mootools que tu as inclu, je réalise qu'il fallait p-e que j'écrive

lienThemeAir.addEventListener('mouseover', function([b][#red]e[/#][/b]) { selectionTheme('air'); }, false);

ANViL a écrit :

P.S: en observant le code mootools que tu as inclu, je réalise qu'il fallait p-e que j'écrive

lienThemeAir.addEventListener('mouseover', function([b][#red]e[/#][/b]) { selectionTheme('air'); }, false);

Il est fort possible que ça marche oui...

ANViL a écrit :
Pour ta remarque concernant la compatibilité avec IE, je suis parfaitement au courant, mais j'ai pris pour habitude de ne me préoccuper des spécificités de ce cauchemar de browser qu'en dernier lieu

C'est ce genre de désagrément qu'il est bien sympa de pouvoir se passer avec l'utilisation d'un framework... Pour l'anecdote, il m'est vraiment arrivé de faire un cauchemar à cause d'IE, dans lequel je n'arrivais plus a faire quoi que ce soit qui marche sous IE... quoique dans la réalité ça y ressemble beaucoup!

ANViL a écrit :

Ceci dit, à lire le code relatif @mootools, je me dis qu'une bonne lecture de la doc serait nécessaire avant de se lancer

Par contre utiliser un framework revient à se familiariser avec un environnement de développement, ça peut être extrêmenent productif, mais si d'un jour à l'autre le support dudit framework était arrêté ? (il faudrait changer de crêmerie, ré-apprendre avec un autre framework etc)

Il est clair que ce genre d'outils possedent les inconvénients de leur avantages et qu'on ne peut etre sur que celui est perenne, cela dit (et la je preche un peu pour la paroisse de mootools ), il ne m'a pas fallu beaucoup de temps pour prendre en main mootools et il semblerai qu'il se le meilleur question poids/performance et surtout j'ai divisé par deux ma conssommation d'aspirine depuis que je l'utilise ... après cela reste une question de choix et je ne dit pas que c'est une obligation, juste un conseil

Bon courage