Gestion automatique d'evenement ? CSS/Javascript

Marsh Posté le 19-09-2007 à 11:46:30

Bonjour tout le monde
J'aimerai savoir s'il est possible d'appeler une fonction javascript grace a des classes CSS sur des evenement types onkeyup, onchange, on blur .... ou par un moyen generique autre que CSS

Sous XUL il est possible de determiner le comportement d'un conteneur de classe X sur des evenements mais je n'ai pas trouvé d'equivalent pour IE. En gros je souhaiterai automatiser l'appel de la fonction appropriée pour chaque classe CSS.

Apres quelques tests voici une methode possible qui fonctionne pour IE7 et FF2. J'aimerai savoir s'il y a des ameliorations a apporter dessus.

Code :

// Fonctions qui recupere les element en fonction de la valeur d'attribut
function getElementsByAttribute;{
//voir http://javascript.internet.com/sni [...] ibute.html ; quelques modif necessaires pour compatibilité
}
//Ajoute les fonctions sur les evenement pour une classe
function setEventOnClass(tag, valeur){
var liste=getElementsByAttribute("*",tag, valeur);
for (var i=0; i<liste.length; i++){
el=liste;
if (el.addEventListener) {
el.addEventListener ("blur", fonction_blur(el) ,false);
el.addEventListener ("change", fonction_change(el) ,false);
el.addEventListener ("keyup", fonction_keyup(el) ,false);
}
else if (el.attachEvent) {
el.attachEvent ("onblur", fonction_blur(el) );
el.attachEvent ("onchange", fonction_change(el) );
el.attachEvent ("onkeyup", fonction_keyup(el) );
}
else {
el.onblur=fonction_blur(el);
el.onchange=fonction_change(el);
el.onkeyup=fonction_keyup(el);
}
}
}
//Ajoute les evenement pour une liste de classe en appelant [i]setEventOnClass pour chaque item de la liste
function setEvent(liste){
for(var i=0;i<liste.length; i++){
tag=liste[i][0];
valeur=liste[i][1];
setEventOnClass(tag, valeur);
}
}

Et pour charger les evenements sur les tag concernés on ajoute un onload
Exemple :

Code :

....
<head>
<script language='javascript'>
var liste=new Array();
var classe_1= new Array("class", "classe_exemple_1" );
var classe_2= new Array("class", "classe_exemple_2" );
liste[0]= classe_1;
liste[1]= classe_2;
</script>
</head>
<body onload="setEvent(liste)";>
...
<INPUT id="CHAMP_TEST" type="text" class="classe_exemple_1">
<INPUT id="CHAMP_TEST_2" type="text" class="classe_exemple_2">
...

Message édité par Sn@kes le 20-09-2007 à 08:59:56

Reply

Marsh Posté le 19-09-2007 à 11:46:30

Reply

Marsh Posté le 20-09-2007 à 07:21:13

Si tu veux que ça fonctionne partout, utilise plutôt une bibliothèque genre Prototype ou Dojo.
Au passage, la balise <header> n'existe pas ;-)

Reply

Gestion automatique d'evenement ? CSS/Javascript

Sujets relatifs:

Leave a Replay