From 2342b15ee5d786490f29705a64c0ec9e65205ade Mon Sep 17 00:00:00 2001
From: denmigda <denis.migdal@uca.fr>
Date: Mon, 13 Nov 2023 13:39:57 +0100
Subject: [PATCH] Fix after today's lesson

---
 Web/X - API JS-DOM/index.md | 53 ++++++++++++++++++++++---------------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/Web/X - API JS-DOM/index.md b/Web/X - API JS-DOM/index.md
index a7196a8..54d2f16 100644
--- a/Web/X - API JS-DOM/index.md	
+++ b/Web/X - API JS-DOM/index.md	
@@ -16,23 +16,26 @@ Si vous utilisez `components.py`, le contenu de `window` est automatiquement imp
 Sinon, vous pouvez soit :
 
 1. Importer `window` :
-  ```python
-  from browser import window
    
-  window.document
-  ```
-2. Importer le contenu de `window` dans l'espace global de Brython :
-  ```python
-  from browser import window
-  
-  g = globals()
-  for x in window.Object.getOwnPropertyNames(window):
-
-  	if x in g or x.startswith("on"):
-  		continue
+   ```python
+   from browser import window
+   
+   window.document
+   ```
 
-  	g[x] = getattr(window, x, None)
-  ```
+2. Importer le contenu de `window` dans l'espace global de Brython :
+   
+   ```python
+   from browser import window
+   
+   g = globals()
+   for x in window.Object.getOwnPropertyNames(window):
+   
+      if x in g or x.startswith("on"):
+          continue
+   
+      g[x] = getattr(window, x, None)
+   ```
 
 # Sélectionner des éléments HTML
 
@@ -193,7 +196,12 @@ Heureusement, il est possible d'utiliser un écouteur délégué, i.e. d'écoute
 function handler(ev) {
     if( ev.target.matches($CSS_SELECTOR) ) {
         // ...
-    } 
+    }
+    // or
+    let target;
+    if( target = ev.target.closest($CSS_SELECTOR) ) {
+        // ...
+    }
 }
 
 $ELEM.addEventListener($EVENT_TYPE, handler);
@@ -205,6 +213,9 @@ $ELEM.addEventListener($EVENT_TYPE, handler);
 def handler(ev):
     if ev.target.matches($CSS_SELECTOR):
         # ...
+    # or
+    if target := ev.target.closest($CSS_SELECTOR):
+        # ...
 
 $ELEM.addEventListener($EVENT_TYPE, handler)
 ```
@@ -214,17 +225,17 @@ $ELEM.addEventListener($EVENT_TYPE, handler)
 ```javascript
 // [JS] Javascript
 
-$ELEM.dispatchEvent( new Event($EVENT_NAME) );
+$ELEM.dispatchEvent( new Event($EVENT_TYPE) );
 // ou
-$ELEM.dispatchEvent( new CustomEvent($EVENT_NAME, {detail: $EVENT_DATA}) );
+$ELEM.dispatchEvent( new CustomEvent($EVENT_TYPE, {detail: $EVENT_DATA}) );
 ```
 
 ```python
 # [🐍] Python
 
-$ELEM.dispatchEvent( Event.new($EVENT_NAME) )
+$ELEM.dispatchEvent( Event.new($EVENT_TYPE) )
 # ou
-$ELEM.dispatchEvent( CustomEvent.new($EVENT_NAME, {"detail": $EVENT_DATA}) )
+$ELEM.dispatchEvent( CustomEvent.new($EVENT_TYPE, {"detail": $EVENT_DATA}) )
 ```
 
 💡 Vous pouvez aussi ajouter, au 2ème argument, l'option `bubble: true` pour faire en sorte que l'événement soit bubble, i.e. se propage dans le DOM (par default `bubble: false`).
@@ -264,7 +275,7 @@ async query():
     # autres formats possibles dans la doc.
 
 
-aio.run( query() ) # [🚩] TODO: Supplier Pierre pour avoir top-level await.
+aio.run( query() )
 ```
 
 📖 Les requêtes de type "GET" (type par défaut) ont leurs paramètres dans l'URL (cf ci-dessous).