Une petite astuce que j'ai découverte récemment et testée pour trouver la meilleure utilisation.
Le but est donc de ne plus avoir de gestion d'événements (onload, onlick...) dans le code xHTML mais que tout soit géré dans le javascript.
On va d'abord définir une fonction quelconque en javascript que l'on va essayer d'appeler avec l'événement interne, puis en externe :
function tell(personne, objet_creux_feminin_singulier)
{
alert(personne+" rentre dans sa "+objet_creux_feminin_singulier);
}
Voici la manière classique d'appeler cette fonction avec l'événement onclick dans un document xHTML :
<a href="#" onclick="tell('toto', 'maison')">Interne</a>
Maintenant le but est d'appeler cette fonction sans l'événement, on va donc ajouter un id à l'élément "a" mais on aurait pu essayer de le retrouver avec getElementsByTagName() (ce qui serait plus difficile dans une page avec x liens).
<a href="#" id="toto_maison">Externe</a>
La méthode pour lier un événement est tout simplement "element.evenement" lorsque il n'y a pas de paramètres et "element.evenement = function() {}" lorsqu'il y a un ou plusieurs paramètres.
Ce qui donne dans notre cas :
document.getElementById('toto_maison').onclick = function()
{
tell('toto', 'maison');
}
Seulement si vous insérez directement ce code dans votre fichier javascript, il ne va pas fonctionner car il va vouloir lier l'événement alors que la page n'est pas terminée de charger et que cet élément n'existe pas encore !
La solution est alors de faire une fonction pour englober les liaisons :
function loadEvents()
{
// Evenement pour le lien toto
document.getElementById('toto').onclick = function()
{
tell('toto', 'maison');
}
}
Une fois cette fonction créée il faut encore la charger elle aussi, on pourrait le faire avec un onload() sur le body mais on a décidé de tout externaliser.
La solution consiste alors à définir l'exécution de cette fonction une fois que la fenetre est chargée :
window.onload = loadEvents;
Et voila, nous avons notre code final qui externalise totalement le javascript.
Exemple complet ci-dessous :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Externalisation</title>
<script type="text/javascript" src="externalisation.js"></script>
</head>
<body>
<a href="#" onclick="tell('toto', 'maison')">Interne</a>
<br/>
<a href="#" id="toto_maison">Externe</a>
</body>
</html>
// JavaScript Document
window.onload = loadEvents;
function loadEvents()
{
// Evenement pour le lien toto
document.getElementById('toto_maison').onclick = function()
{
tell('toto', 'maison');
}
}
function tell(personne, objet_creux_feminin_singulier)
{
alert(personne+" rentre dans sa "+objet_creux_feminin_singulier);
}
EDIT : Ce script est maintenant disponible dans mon labo