comment gérez des évènements autrement que la vérification lorsque la page charge, je m'explique, lorsque j'ajoute un personnage au favoris le problème c'est que l'état du coeur remplit est actualisé après refresh et je veux voir le coeur changez de couleur sans refresh  : j'ai des repertoires models, services et view. Je veux avoir une architecture clean, j'ai penser a mettre une balise script dans le return du html mais je me demande si d'autre pratique sont plus clean : // Instantiate API
import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import FavoriteManager from '../../services/FavoriteManager.js';

export default class Home {
    async render() {
        let personnages = await PersonnagesProvider.FetchPersonnages();
        let html = personnages
          .map(
            (personnage) => /*html*/ `
                <div class="col">
                <div class="card shadow-sm">
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">${personnage.nom}</text></svg>
                    <div class="card-body">
                        <p class="card-text">${personnage.nom}</p>
                        <p>Force: ${personnage.statistiques.force}</p>
                        <p>Dextérité: ${personnage.statistiques.dextérité}</p>
                        <p>Intelligence: ${personnage.statistiques.intelligence}</p>
                        <p>Santé: ${personnage.statistiques.santé}</p>
                        <p>Mana: ${personnage.statistiques.mana}</p>
                        <p>Defense: ${personnage.statistiques.defense}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                            <a href="#/personnage/${personnage.id}" class="btn btn-sm btn-outline-secondary">+ détail sur ${personnage.nom}</a>
                            </div>
                            <small class="text-body-secondary">${personnage.id}</small>
                            <a onclick="FavoriteManager.toggleFavorites('${personnage.id}');">
                            ${FavoriteManager.isFavorite(personnage.id) ? 
                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"><path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/></svg>' : 
                            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16"><path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>'} 
                        </a>
                        </div>
                    </div>
                </div>
                </div>
                `
          )
          .join("\n ");
      
        return /*html*/ `
                <nav>
                    <ul>
                    <div class="left-part">
                    <li><a href="/">Personnages</a></li>
                    <li><a href="#/armes">Armes</a></li>
                    <li><a href="#/armures">Armures</a></li>
                    </div>
                    <li>Mes favoris</li>
                    </ul>
                <nav>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    ${html}
                </div>
            `;
      }
}
import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import Utils from "../../services/Utils.js";

export default class Personnage{

    async render(){
        let request = Utils.parseRequestURL();
        let personnage = await PersonnagesProvider.getPersonnages(request.id);
        personnage.map(p => {
            personnage = p;
        })        
        return /*html*/`
            <script>
                function testt(){
                    console.log("test");
                }
            </script>
            <section class="section">
                <h1> Nom : ${personnage.nom}</h1>
                <p> Classe : ${personnage.classe} </p>
                <p> Note : ${personnage.note} </p>
                <p> Niveau : ${personnage.niveau} </p>
            </section>
            <p><a href="">+ 100 expériences</a></p>
            <a onclick="testt();">Ajouter en favoris</a>
            <p><a href="/">Retour</a></p>
        `
    }
}const Utils = { 
    // --------------------------------
    //  Parse a url and break it into resource, id and verb
    // --------------------------------
    parseRequestURL : () => {

        let url = location.hash.slice(1).toLowerCase() || '/';
        let r = url.split("/")
        let request = {
            resource    : null,
            id          : null,
            verb        : null
        }
        request.resource    = r[1]
        request.id          = r[2]
        request.verb        = r[3]

        return request
    }

    // --------------------------------
    //  Simple sleep implementation
    // --------------------------------
    , sleep: (ms) => {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

export default Utils;