SyntheticEvent
Αυτός ο οδηγός καταγράφει το SyntheticEvent
wrapper που αποτελεί κομμάτι του Event System του React. Δείτε τον οδηγό Διαχείριση των Events για να μάθετε περισσότερα.
Επισκόπηση
<<<<<<< HEAD
Οι event handlers θα λάβουν instances του SyntheticEvent
, ένα cross-browser wrapper γυρω απο το native event του browser. Έχει το ιδιο interface με το native event του browser, συμπεριλαμβανομένου του stopPropagation()
και του preventDefault()
, με τη διαφορά πως τα events αυτά έχουν ακριβώς την ιδια συμπεριφορά σε ολους τους browsers.
Εαν για κάποιο λογο χρειάζεστε το event του browser, απλώς χρησιμοποιήστε το nativeEvent
attribute για να το πάρετε. Κάθε SyntheticEvent
αντικείμενο έχει τα ακόλουθα attributes:
Your event handlers will be passed instances of SyntheticEvent
, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation()
and preventDefault()
, except the events work identically across all browsers.
If you find that you need the underlying browser event for some reason, simply use the nativeEvent
attribute to get it. The synthetic events are different from, and do not map directly to, the browser’s native events. For example in onMouseLeave
event.nativeEvent
will point to a mouseout
event. The specific mapping is not part of the public API and may change at any time. Every SyntheticEvent
object has the following attributes:
bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
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