SyntheticEvent

מדריך עזר זה מסביר על מעטפת ה-SyntheticEvent המהווה חלק ממערכת האירועים של React. ראה את מדריך טיפול באירועים על מנת ללמוד עוד.

סקירה כללית

מטפלי האירועים שלך מקבלים מופעים של SyntheticEvent, מעטפת תאימות בין דפדפנים מסביב לאירוע המקורי של הדפדפן. יש לה את אותו ממשק כמו האירוע המקורי, כולל stopPropagation() ו-preventDefault(), למעט זה שהאירועים עובדים באופן זהה בין כל הדפדפנים.

אם אתה מגלה שאתה זקוק לאירוע הדפדפן הבסיסי מסיבה כלשהי, פשוט השתמש במאפיין nativeEvent על מנת לקבל אותו. כל אובייקט SyntheticEvent מכיל את התכונות הבאות:

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

הערה:

החל מגרסה 0.14, החזרת false ממטפל אירועים כבר לא תעצור התפשטות אירועים. לחלופין, e.stopPropagation() או e.preventDefault() צריכים להיות מופעלים ידנית, בהתאם לצורך.

איגוד אירועים

SyntheticEvent הוא מאוגד. זה אומר שייעשה שימוש חוזר באובייקט ה-SyntheticEvent וכל מאפייניו יבוטלו לאחר שה-callback של האירוע יופעל.

  • דבר זה קורה בגלל סיבות שקשורות לביצועים.
  • כתוצאה מכך, לא ניתן לגשת לאירוע בצורה אסינכרונית.
function onClick(event) {
  console.log(event); // => אובייקט מבוטל.
  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});

  // עדיין ניתן לייצא את מאפייני האירוע.
  this.setState({eventType: event.type});
}

הערה:

אם אתה רוצה לגשת למאפייני האירוע בצורה אסינכרונית, עליך לעשות זאת באמצעות קריאה ל-event.persist() על האירוע, דבר שיסיר את האירוע הסינתטי מהאיגוד ויאפשר הפניות לאירוע להישמר על ידי קוד המשתמש.

אירועים נתמכים

React מנרמלת אירועים כך שיהיו להם מאפיינים עקביים בין דפדפנים שונים.

מטפלי האירועים שלהלן מופעלים על ידי אירוע בשלב הבעבוע. על מנת לרשום מטפל אירועים לשלב הלכידה, הוסף Capture לשם האירוע; לדוגמה, במקום שימוש ב-onClick, עליך להשתמש ב-onClickCapture על מנת לטפל באירוע ההקלקה בשלב הלכידה.


סימוכין

אירועי clipboard

שמות אירועים:

onCopy onCut onPaste

מאפיינים:

DOMDataTransfer clipboardData

אירועי קומפוזיציה

שמות אירועים:

onCompositionEnd onCompositionStart onCompositionUpdate

מאפיינים:

string data

אירועי מקלדת

שמות אירועים:

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 בשלב 3.


אירועי פוקוס

שמות אירועים:

onFocus onBlur

אירועי הפוקוס הללו עובדים על כל האלמנטים ב-DOM של React, לא רק אלמנטי טפסים.

מאפיינים:

DOMEventTarget relatedTarget

אירועי טפסים

שמות אירועים:

onChange onInput onInvalid onSubmit

לקבלת מידע נוסף על אירוע ה-onChange, ראה טפסים.


אירועי עכבר

שמות אירועים:

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

אירועי ה-onMouseEnter ו-onMouseLeave מופצים מהאלמנט שהעכבר עזב אל האלמנט שאליו העכבר נכנס במקום בעבוע רגיל ואין להם שלב לכידה.

מאפיינים:

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

אירועי מצביע

שמות אירועים:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

אירועי ה-onPointerEnter ו-onPointerLeave מופצים מהאלמנט שהעכבר עזב אל האלמנט שאליו העכבר נכנס במקום בעבוע רגיל ואין להם שלב לכידה.

מאפיינים:

כמו שהוגדר ב-W3 spec, אירועי מצביע מרחיבים אירועי עכבר עם המאפיינים הבאים:

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

הערה לגבי תמיכה בדפדנים:

אירועי מצביע עדיין לא נתמכים בכל הדפדפנים (בזמן כתיבת מאמר זה, הדפדנים הנתמכים הם: Chrome, Firefox, Edge, ו-Internet Explorer). באופן מכוון React לא מממשת polyfill לתמיכה בדפדפנים אחרים כי polyfill תאימות סטנדרטית יגדיל משמעותית את גודל הבאנדל של react-dom.

אם האפליקצייה שלך דורשת אירועי מצביע, אנו ממליצים שתוסיף polyfill אירועי מצביע מצד שלישי.


אירועי בחירה

שמות אירועים:

onSelect

אירועי טאץ’

שמות אירועים:

onTouchCancel onTouchEnd onTouchMove onTouchStart

מאפיינים:

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

אירועי ממשק משתמש

שמות אירועים:

onScroll

מאפיינים:

number detail
DOMAbstractView view

אירועי גלגל

שמות אירועים:

onWheel

מאפיינים:

number deltaMode
number deltaX
number deltaY
number deltaZ

אירועי מדיה

שמות אירועים:

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

אירועי תמונה

שמות אירועים:

onLoad onError

אירועי אנימציה

שמות אירועים:

onAnimationStart onAnimationEnd onAnimationIteration

מאפיינים:

string animationName
string pseudoElement
float elapsedTime

אירועי מעבר

שמות אירועים:

onTransitionEnd

מאפיינים:

string propertyName
string pseudoElement
float elapsedTime

אירועים אחרים

שמות אירועים:

onToggle