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 relatedTarget
onFocus
נקרא ל-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