javascript / expert
Snippet
Beherrschung der Event-Capture-Phase für globales Abfangen
React unterstützt die Capture-Phase durch 'Capture'-Suffixe (z.B. onClickCapture). Das Abfangen von Events während der Capture-Phase (Top-Down) statt der Bubbling-Phase (Bottom-Up) ist essenziell für komplexe UI-Komponenten wie Modale oder Analytics-Wrapper, die Interaktionen abfangen müssen, bevor Kind-Elemente sie verarbeiten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function GlobalClickTracker() {const containerRef = useRef(null);useEffect(() => {const handleCapture = (e) => {console.log('Intercepted in capture phase:', e.target);// Can prevent events before they reach children// e.stopPropagation();};const el = containerRef.current;el.addEventListener('click', handleCapture, true);return () => el.removeEventListener('click', handleCapture, true);}, []);return <div ref={containerRef} onClickCapture={() => {}}>...</div>;}
react
Erklärung
1
addEventListener(..., true)
Das dritte Argument 'true' aktiviert die Capture-Phase anstelle der standardmäßigen Bubbling-Phase.
2
onClickCapture
Reacts synthetisches Event-Prop-Äquivalent für die DOM-Capture-Phase.
3
e.stopPropagation()
Verhindert in der Capture-Phase, dass das Event irgendwelche Kind-Elemente erreicht.