SyntheticEvent
מדריך עזר זה מסביר על מעטפת ה-SyntheticEvent המהווה חלק ממערכת האירועים של React. ראה את מדריך טיפול באירועים על מנת ללמוד עוד.
סקירה כללית
מטפלי האירועים שלך מקבלים מופעים של SyntheticEvent, מעטפת תאימות בין דפדפנים מסביב לאירוע המקורי של הדפדפן. יש לה את אותו ממשק כמו האירוע המקורי, כולל stopPropagation() ו-preventDefault(), למעט זה שהאירועים עובדים באופן זהה בין כל הדפדפנים.
אם אתה מגלה שאתה זקוק לאירוע הדפדפן הבסיסי מסיבה כלשהי, פשוט השתמש במאפיין nativeEvent על מנת לקבל אותו. האירועים הסינטטיים שונים ולא ממפים לאירועים של הדפדפן. לדוגמה בonMouseLeave, האירוע event.nativeEvent יצביע על האירוע mouseout. המיפוי הספציפי הוא לא חלק מהpublic API ויכול להשתנות בכל זמן. כל אובייקט SyntheticEvent מכיל את התכונות הבאות:
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הערה:
מגרסה v17, שימוש ב-
e.persist()לא עושה כלום בגלל שה-SyntheticEventלא מצורף יותר.
הערה:
נכון לגרסה v0.14, החזרת
falseמ-event handler יותר לא יפסיק התרבות event. במקום זאת,e.stopPropagation()אוe.preventDefault()אמורים לפעול ידנית, כראוי.
אירועים נתמכים
React מנרמלת אירועים כך שיהיו להם מאפיינים עקביים בין דפדפנים שונים.
מטפלי האירועים שלהלן מופעלים על ידי אירוע בשלב הבעבוע. על מנת לרשום מטפל אירועים לשלב הלכידה, הוסף Capture לשם האירוע; לדוגמה, במקום שימוש ב-onClick, עליך להשתמש ב-onClickCapture על מנת לטפל באירוע ההקלקה בשלב הלכידה.
- אירועי clipboard
- אירועי קומפוזיציה
- אירועי מקלדת
- אירועי פוקוס
- אירועי טפסים
- אירועים גנריים
- אירועי עכבר
- אירועי מצביע
- אירועי בחירה
- אירועי טאץ’
- אירועי ממשק משתמש
- אירועי גלגל
- אירועי מדיה
- אירועי תמונה
- אירועי אנימציה
- אירועי מעבר
- אירועים אחרים
סימוכין
אירועי 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 relatedTargetonFocus
נקרא ל-onFocus כשהאלמנט (או אלמנט כלשהו בתוכו) מקבל פוקוס. לדוגמה, נקרא לו כשהמשתמש לוחץ על קלט טקסט.
function Example() {
return (
<input
onFocus={(e) => {
console.log('Focused on input');
}}
placeholder="onFocus is triggered when you click this input."
/>
)
}onBlur
נקרא ל-onBlur כשהפוקוס עזב את האלמנט (או אלמנט כלשהו בתוכו). לדוגמה, נקרא לו כשהמשתמש לוחץ על נקודה מחוץ לקלט הטקסט שבפוקוס.
function Example() {
return (
<input
onBlur={(e) => {
console.log('Triggered because this input lost focus');
}}
placeholder="onBlur is triggered when you click this input and then you click outside of it."
/>
)
}זיהוי כניסה ויציאה של פוקוס
ניתן להשתמש ב-currentTarget וב-relatedTarget להבדיל אם מקורם של אירועי הפוקוס או הטשטוש מחוץ לאלמנט ההורה. הנה דמו שתוכל להעתיק ולהדביק שמראה איך לזהות פוקוס על אלמנט צאצא, פוקוס על האלמנט עצמו, ופוקוס כשנכנסים או עוזבים את כל התת-עץ.
function Example() {
return (
<div
tabIndex={1}
onFocus={(e) => {
if (e.currentTarget === e.target) {
console.log('focused self');
} else {
console.log('focused child', e.target);
}
if (!e.currentTarget.contains(e.relatedTarget)) {
// לא מופעל כשמחליפים פוקוס בין ילדים
console.log('focus entered self');
}
}}
onBlur={(e) => {
if (e.currentTarget === e.target) {
console.log('unfocused self');
} else {
console.log('unfocused child', e.target);
}
if (!e.currentTarget.contains(e.relatedTarget)) {
// לא מופעל כשמחליפים פוקוס בין ילדים
console.log('focus left self');
}
}}
>
<input id="1" />
<input id="2" />
</div>
);
}אירועי טפסים
שמות אירועים:
onChange onInput onInvalid onReset onSubmit לקבלת מידע נוסף על אירוע ה-onChange, ראה טפסים.
אירועיים גנריים
Event names:
onError onLoadאירועי עכבר
שמות אירועים:
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הערה
החל מגרסה 17,
onScrollלא מבעבע בריאקט. זה תואם את התנהגות הדפדפן ומונע בלבול כשתת אלמנט שהוא scrollable יורה events על הורה רחוק.
מאפיינים:
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