Utilisation de fonction sur un évènement
Evènement dans le code HTML
Sur un évènement du dom, une méthode simple est de référencer directement dans le code html, l’attribut onevent à la balise que l’on veut rendre dynamique.
Exemple :
<input type="text" value="entrer" />
Cette méthode très avantageuse permet :
- de passer des paramètres à la fonction destinataire
- de garder la balise émettrice de l’appel
Ce qui n’est pas possible avec les fonctions dynamiques.
Evènements gérés de manière dynamique
Deux standards
Le premier standard est celui du dom, il est reconnu par firefox et opéra, et s’écrit sur la forme :
element.addEventListener(event, handler, typePropagation);
Le deuxième est celui d’IE :
element.attachEvent(event, handler)
A noter que event s’écrit avec IE en incluant le ‘on’ et sans dans le dom w3c (ie:onclick, dom:click).
Un explication détaillée peut être trouvée ici
Problématique
Dans une utilisation basique, nous perdons :
- la capacité d’envoyé à la fonction d’autre variable que l’élément source.
- l’élément sur lequel est inscrit la fonction (sous IE il est impossible de retrouver de manière simple cet élément)
Cherchant une utilisation cross-Browser nous nous retrouvons avec très peu d’information une fois l’évènement enclenché.
Solution
Il peut s’averer utile de transmettre des variables, il est tout aussi utile de connaitre l’origine de l’évènement qui est souvent plus intéressant que la balise qui l’a déclenché*.
l’utilisation de la fontion eval s’avère une solution :
function addEvent(element, action, fct, bool){ if (element.addEventListener) { element.addEventListener(action, function(){eval(fct)}, bool); } else if (element.attachEvent) { element.attachEvent("on"+action, function(){eval(fct)}); } } addEvent( document.getElementById('test'), 'click', 'alert(\''+document.getElementById('test').getAttribute('id')+'\');alert(new Date())', false )
Balise Test
Voilà, avec cette méthode vous pouvez transmettre tout paramètre à vos évènements.
A noter que cela est aussi utilisable pour les handlers présent dans settimeout ou dans setintervalle.
*En effet, sous ces deux navigateurs, un évènement intégré dans une balise de niveau n serait reconnu par les balise de niveau n+m, et c’est la balise finale qui enverrais son identification et non la balise portant l’évènement. Avec IE, il n’existe pas de variable simple afin de récupérer cette balise, avec le dom, event.currentTarget permet de la connaitre.
