Was ist in React der Unterschied zwischen onKeyUp und onKeyUpCapture (und onKeyDown/Capture)?

Ich suchte nach Dokumentation und Fragen dazu, war aber überrascht, keine zu finden.

In der Datei React index.d.ts wird Folgendes angezeigt:

// Keyboard Events
onKeyDown?: KeyboardEventHandler<T>;
onKeyDownCapture?: KeyboardEventHandler<T>;
onKeyPress?: KeyboardEventHandler<T>;
onKeyPressCapture?: KeyboardEventHandler<T>;
onKeyUp?: KeyboardEventHandler<T>;
onKeyUpCapture?: KeyboardEventHandler<T>;

Und ich wollte onKeyUp verwenden, aber dann sind mir die beiden Versionen aufgefallen. Was ist der Unterschied zwischen diesem und onKeyUpCapture, und welche Vorteile hat das eine gegenüber dem anderen? Wann würde ich sie verwenden?

Event-Handler in React übergibt eine Instanz von SyntheticEvent, ein Cross-Browser-Wrapper um das native Ereignis des Browsers. Der Begriff capture hat nichts mit React zu tun. Tatsächlich ist es ein Konzept von DOM HTML Event.

Es gibt 3 allgemeine Phasen der Ereignisausbreitung DOM-Ereignisse:

Der Erfassungsphase: Das Ereignisobjekt wird durch die Vorfahren des Ziels vom Fenster zum Elternobjekt des Ziels weitergegeben. (Das Ereignis geht bis zum Element). Sie möchten es kaum in echtem Code verwenden.

Der Zielphase: Das Ereignisobjekt erreicht das Ereignisziel des Ereignisobjekts. Diese Phase wird auch als At-Target-Phase bezeichnet. Wenn der Ereignistyp anzeigt, dass das Ereignis nicht sprudelt, wird das Ereignisobjekt nach Abschluss dieser Phase angehalten.

Der Blasenphase: Das Ereignisobjekt breitet sich in umgekehrter Reihenfolge durch die Vorfahren des Ziels aus, beginnend mit dem Elternobjekt des Ziels und endend mit dem Fenster. Diese Phase wird auch als Sprudelphase bezeichnet.

Ereignisobjekte werden an ein Ereignisziel gesendet. Aber bevor der Versand beginnen kann, muss zunächst der Ausbreitungspfad des Ereignisobjekts bestimmt werden.

Der Ausbreitungspfad ist eine geordnete Liste aktueller Ereignisziele, die das Ereignis durchläuft. Dieser Ausbreitungspfad spiegelt die hierarchische Baumstruktur des Dokuments wider. Das letzte Element in der Liste ist das Ereignisziel, und die vorhergehenden Elemente in der Liste werden als die Vorfahren des Ziels bezeichnet, wobei das unmittelbar vorhergehende Element als das übergeordnete Element des Ziels bezeichnet wird.

klickt “>

Wie Sie auf diesem Bild sehen können, zeigt es die Erfassungsphase das beginnt mit dem Fenster, das durch die Vorfahrenkette bis hinunter zum Elementziel geht. Wenn es dann das Zielelement erreicht, wird es dort ausgelöst – Zielphase Und schließlich sprudelt es zu den Vorfahren des Ziels – sprudelnde Phase (hört auf zu sprudeln, wenn Vorfahren vorhanden sind stopPropagation

React gibt Ihnen also die Capture-Phase, indem es sie anhängt onKeyUp welches ist onKeyUpCapture

Beispiel für 3 verschiedene Ausbreitungsphasen