SyntheticEvent

Αυτός ο οδηγός καταγράφει το SyntheticEvent wrapper που αποτελεί κομμάτι του Event System του React. Δείτε τον οδηγό Διαχείριση των Events για να μάθετε περισσότερα.

Επισκόπηση

Οι event handlers θα λάβουν instances του SyntheticEvent, ένα cross-browser wrapper γυρω απο το native event του browser. Έχει το ιδιο interface με το native event του browser, συμπεριλαμβανομένου του stopPropagation() και του preventDefault(), με τη διαφορά πως τα events αυτά έχουν ακριβώς την ιδια συμπεριφορά σε ολους τους browsers.

Εαν για κάποιο λογο χρειάζεστε το event του browser, απλώς χρησιμοποιήστε το nativeEvent attribute για να το πάρετε. Κάθε SyntheticEvent αντικείμενο έχει τα ακόλουθα attributes:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

Σημείωση:

Απο την v0.14, επιστρέφοντας false από ένα event handler δε θα σταματάει πλεον τη διάδοση του event. Αντί για αυτό, το e.stopPropagation() είτε το e.preventDefault() πρέπει να καλούνται, ανάλογα την περίπτωση.

Event Pooling

Το SyntheticEvent είναι pooled. Αυτό σημαίνει πως το SyntheticEvent αντικείμενο θα ξαναχρησιμοποιηθεί και όλες οι ιδιότητες του θα ακυρωθούν από τη στιγμή που θα γίνει κλήση του event callback. Αυτό γίνεται για λόγους αποδοτικότητας. Ως επακόλουθο, δε μπορείτε να έχετε πρόσβαση στο event με ασύγχρονο τρόπο.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Δε θα λειτουργήσει. Το this.state.clickEvent θα περιέχει μόνο null τιμές.
  this.setState({clickEvent: event});

  // Έχετε ακόμα πρόσβαση στις ιδιότητες του event.
  this.setState({eventType: event.type});
}

Σημείωση:

Αν θέλετε να έχετε πρόσβαση στις ιδιότητες του event με ασύγχρονο τρόπο, μπορείτε να καλέσετε την event.persist() στο event, η οποία θα αφαιρέσει το synthetic event από το pool και θα επιτρέψει αναφορές στο event να διατηρούνται στον κώδικα.

Υποστηριζόμενα Events

Το React κανονικοποιεί τα events ώστε να έχουν τις ίδιες ιδιότητες ανεξαρτήτως browser.

Τα event handlers που ακολουθούν ενεργοποιούνται απο ενα event κατά τη διάρκεια του bubbling phase. Για να δηλώσετε ένα event handler για το capture phase, προσθέστε το Capture στο όνομα του event, για παράδειγμα, αντί για onClick, θα χρησιμοποιήσετε το onClickCapture ώστε να χειριστείτε το click event στο capture phase.

• Clipboard Events
• Composition Events
• Keyboard Events
• Focus Events
• Form Events
• Generic Events
• Mouse Events
• Pointer Events
• Selection Events
• Touch Events
• UI Events
• Wheel Events
• Media Events
• Image Events
• Animation Events
• Transition Events
• Other Events

Reference

Clipboard Events

Ονόματα των Event:

onCopy onCut onPaste

Ιδιότητες:

DOMDataTransfer clipboardData

Composition Events

Ονόματα των Event:

onCompositionEnd onCompositionStart onCompositionUpdate

Ιδιότητες:

string data

Keyboard Events

Ονόματα των Event:

onKeyDown onKeyPress onKeyUp

Ιδιότητες:

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

Η ιδιότητα key μπορεί να πάρει οποιαδήποτε από τις τιμές που είναι τεκμηριωμένες στο DOM Level 3 Events spec.

Focus Events

Ονόματα των Event:

onFocus onBlur

These focus events work on all elements in the React DOM, not just form elements.

Ιδιότητες:

DOMEventTarget relatedTarget

Form Events

Ονόματα Event:

onChange onInput onInvalid onReset onSubmit 

Για περισσότερες πληροφορες σχετικά με το onChange event, δείτε Φόρμες.

Generic Events

Event names:

onError onLoad

Mouse Events

Ονόματα Event:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Το onMouseEnter και το onMouseLeave events διαδίδονται από το element το οποιο βρίσκεται αριστερά απο αυτό που δέχεται το event σε σχέση με μια φυσιολογική διάδοση και δεν έχει capture phase.

Ιδιότητες:

boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

Pointer Events

Ονόματα Event:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Το onPointerEnter και το onPointerLeave events διαδίδονται από το element το οποιο βρίσκεται αριστερά απο αυτό που δέχεται το event σε σχέση με μια φυσιολογική διάδοση και δεν έχει capture phase.

Ιδιότητες:

Όπως ορίζεται απο το W3 spec, pointer events επεκτείνουν Mouse Events με τις ακόλουθες ιδιότητες:

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

Μια σημείωση σχετικά με την υποστήριξη cross-browser:

Pointer events δεν υποστηρίζονται ακόμα σε όλους τους browsers (τη στιγμή που γράφετε αυτό το άρθρο, οι υποστηριζόμενοι browsers περιλαμβάνουν τους: Chrome, Firefox, Edge, and Internet Explorer). Το React σκοπίμως δεν υποστηρίζει polyfill για άλλους browsers γιατί ένα polyfill συμβατό με το πρότυπο θα αύξανε σημαντικά το μέγεθος του react-dom.

Αν η εφαρμογή σας απαιτεί pointer events, συνιστούμε την προσθήκη ενός third party pointer event polyfill.

Selection Events

Ονόματα Event:

onSelect

Touch Events

Ονόματα Event:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Ιδιότητες:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

UI Events

Ονόματα Event:

onScroll

Ιδιότητες:

number detail
DOMAbstractView view

Wheel Events

Ονόματα Event:

onWheel

Ιδιότητες:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events

Ονόματα Event:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting

Image Events

Ονόματα Event:

onLoad onError

Animation Events

Ονόματα Event:

onAnimationStart onAnimationEnd onAnimationIteration

Ιδιότητες:

string animationName
string pseudoElement
float elapsedTime

Transition Events

Ονόματα Event:

onTransitionEnd

Ιδιότητες:

string propertyName
string pseudoElement
float elapsedTime

Άλλα Events

Ονόματα Event:

onToggle