Cuando se abre la página (por lo que se muestra el primer LayerGroup), no se llama al evento "agregar". Luego, si trato de abrir otra capa, su evento "agregar" tampoco se llama. Finalmente, cuando abro la tercera capa, su evento "agregar" funciona. A partir de ese momento cada evento "add" funciona correctamente. Este es el código:
<body> <div id="map"></div> <!-- Leaflet --> <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> <script> // Layer groups const baseLayerUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const test = L.layerGroup([L.tileLayer(baseLayerUrl)]); const test2 = L.layerGroup([L.tileLayer(baseLayerUrl)]); const test3 = L.layerGroup([L.tileLayer(baseLayerUrl)]); // Create map const map = L.map('map', { center: [45.494659, 12.347180], zoom: 15, layers: [test, test2, test3], zoomControl: false }); //redefine zoom position L.control.zoom({ position: 'topright' }).addTo(map); // Add layers control L.control.layers({ "Test": test, "Test 2": test2, "Test 3": test3, }, null, {collapsed: false, position: 'bottomleft'}).addTo(map); test.on("add", () => { console.log("stat1") }) test2.on("add", () => { console.log("stat2") }) test3.on("add", () => { console.log("stat3") }) </script> </body>