Événements et Journalisation

htmx dispose d’un vaste mécanisme d’événements, qui fait également office de système de journalisation.

Si vous souhaitez vous inscrire à un événement htmx spécifique, vous pouvez utiliser :

document.body.addEventListener('htmx:load', function(evt) {
    myJavascriptLib.init(evt.detail.elt);
});

Ou, si vous préférez, vous pouvez utiliser le helper htmx suivant :

htmx.on("htmx:load", function(evt) {
    myJavascriptLib.init(evt.detail.elt);
});

L’événement htmx:load est déclenché chaque fois qu’un élément est chargé dans le DOM par htmx et est effectivement l’équivalent de l’événement load normal.

Initialiser une Bibliothèque Tiers avec des Événements

L’utilisation de l’événement htmx:load pour initialiser du contenu est si courante que htmx fournit une fonction utilitaire :

htmx.onLoad(function(target) {
    myJavascriptLib.init(target);
});

Cela fait la même chose que le premier exemple, mais c’est un peu plus propre.

Configurer une Requête avec des Événements

Vous pouvez gérer l’événement htmx:configRequest pour modifier une requête AJAX avant qu’elle ne soit émise :

document.body.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.parameters['auth_token'] = getAuthToken(); // ajouter un nouveau paramètre à la requête
    evt.detail.headers['Authentication-Token'] = getAuthToken(); // ajouter un nouvel en-tête à la requête
});

Ici, nous ajoutons un paramètre et un en-tête à la requête avant qu’elle ne soit envoyée.

Modifier le Comportement d’Insertion avec des Événements

Vous pouvez gérer l’événement htmx:beforeSwap pour modifier le comportement d’échange de htmx :

document.body.addEventListener('htmx:beforeSwap', function(evt) {
    if (evt.detail.xhr.status === 404){
        // avertir l'utilisateur lorsqu'un 404 se produit (peut-être utiliser un mécanisme plus agréable qu'une alerte)
        alert("Erreur : Ressource introuvable");
    } else if (evt.detail.xhr.status === 422){
        // permettre aux réponses 422 d'être échangées, car nous utilisons cela comme un signal
        // qu'un formulaire a été soumis avec de mauvaises données et voulons le réafficher avec
        // les erreurs
        //
        // définir isError à false pour éviter la journalisation des erreurs dans la console
        evt.detail.shouldSwap = true;
        evt.detail.isError = false;
    } else if (evt.detail.xhr.status === 418){
        // si le code de réponse 418 (Je suis une théière) est retourné, rediriger le contenu
        // de la réponse vers l'élément avec l'id `teapot`
        evt.detail.shouldSwap = true;
        evt.detail.target = htmx.find("#teapot");
    }
});

Ici, nous gérons quelques codes de réponse d’erreur de niveau 400 qui, normalement, ne feraient pas l’objet d’un échange dans htmx.

Nom des Événements

Notez que tous les événements sont déclenchés avec deux noms différents :

• Camel Case
• Kebab Case

Par exemple, vous pouvez écouter htmx:afterSwap ou htmx:after-swap. Cela facilite l’interopérabilité avec d’autres bibliothèques. Par exemple, Alpine.js nécessite l’utilisation de kebab case.

Journalisation

Si vous définissez un logger sur htmx.logger, chaque événement sera consigné. Cela peut être très utile pour le dépannage :

htmx.logger = function(elt, event, data) {
    if (console) {
        console.log(event, elt, data);
    }
}