jeudi 11 décembre 2008
C'est une bonne pratique de détacher les événements JavaScript placés directement sur un élément HTML en les regroupant à la place sous la balise <head>.
Un exemple :
<input type="button" id="btnSubmit" value="OK" onClick="myFunction" />
Pour attacher la fonction dans la balise HEAD, on doit attendre que le DOM (Document Object Model) soit chargé, autrement, il ne trouvera pas l'élément puisqu'il n'existe pas encore.
En utilisant la librairie prototype.js, on pouvait généralement le faire comme ceci :
Event.observe(window, 'load', function() {
/* initialisation suite au chargement de la page */
Event.observe('btnSubmit', 'click', myFunction);
});
Depuis la version 1.6, il est possible de remplacer cet appel par :Event.observe(document, 'dom:loaded', function() {Qui est aussi équivalent à :
/* initialisation suite au chargement du DOM */
Event.observe('btnSubmit', 'click', myFunction);
});
document.observe("dom:loaded", function() {Ainsi, le code HTML est plus "propre", mieux structuré et surtout plus facile à lire. Ce qui me fait penser que ça fait pratiquement un an que la librairie prototype.js n'a pas évolué. Qu'est-ce qui se passe ?
/* initialisation */
Event.observe('btnSubmit', 'click', myFunction);
});
