Appel à avis : Handlers d’événement inline en Javascript

À la suite de mon dernier article, au sujet des technos navigateur, je prépare un autre billet consacré aux langage alternatifs qui génèrent du Javascript. Et au détour de tout ça, je suis tombé sur une page de la documentation Dart qui m’a un peu interloqué.

Cette page, consacrée à l’intégration de Dart dans du HTML, parle entre autre des handlers d’événement inline (désolé pour le franglais, je n’ai pas trop de synonyme correct qui me vienne spontanément à l’esprit). Vous savez, c’est le fait de mettre un “onclick” ou un “onchange” sur un élément HTML pour appeler une fonction Javascript lorsque l’événement en question est exécuté.

With JavaScript, programmers can embed inline event listener code directly onto HTML nodes. However, this is typically discouraged in modern JavaScript applications. HTML pages generally render more quickly if listeners are added programmatically afterwards. Modern security guidelines also discourage inline code. As such, we propose to not allow inline Dart listeners.

J’ai été un peu étonné de lire ça. En cherchant 30 secondes sur le web, je suis tombé sur une question/réponse du site StackOverflow :

Most experienced developers shun this method, but it does get the job done; it is simple and direct.

Je fais donc appel à l’aide des lecteurs de ce blog.
Je code pas mal de Javascript ; pas autant que de PHP, mais ce doit être au final mon deuxième langage en quantité de code écrit (eh oui, même devant le C). J’écris du code que j’estime propre, en créant des objets et en les rangeant dans des namespaces, utilisant des callbacks là où ça se justifie, tout en se gardant du « callback hell ».

Et personnellement, j’ai toujours trouvé qu’il était plus facile de maintenir du code avec les appels d’événements indiqués dans le HTML, plutôt que de les positionner par Javascript. Quand on cherche ce qu’il se passe quand on clique sur tel élément, ou quand on tape du texte dans un champ texte, il est très facile de regarder le code HTML, voir quel méthode de quel objet est appelée, et enfin aller voir directement dans cette méthode.

Donnez-moi votre avis s’il-vous-plait.

Préférez-vous ce type de code :

<script>
var site = new function() {
    this.init = function() {
        // quelques initialisations
    };
    this.checkContent = function(text) {
        // un peu de code applicatif
    };
};
</script>
<input type="text" name="content"
 onblur="site.checkContent(this.value)" />

Ou plutôt celui-ci :

<script>
var site = new function() {
    this.init = function() {
        // initialisation du handler d'événement
        $("#edit").on("blur", function() {
            site.checkContent();
        });
    };
    this.checkContent = function() {
        var text = $("#edit").val();
        // un peu de code applicatif
    };
};
</script>
<input id="edit" type="text" name="content" />

Et pourquoi ?