این صفحه، مرجع SyntheticEvent می‌باشد که بخشی از سیستم رویدادهای ری‌اکت (React’s Event System) را تشکیل می‌دهد. برای یادگیری بیشتر، Handling Events را ببینید.
SyntheticEvent روکشی است بر رویدادهای ذاتی خود مرورگر که در تمام مرورگرها کار می‌کند. کنترل کننده‌های رویداد (event handlers) شما instance هایی از SyntheticEvent دریافت خواهند کرد. رابط آن همانند رویدادهای ذاتی مرورگر است و شامل stopPropagation() و preventDefault() هم هست. با این تفاوت که رویدادها در تمام مرورگرها عین هم کار می‌کنند.
اگر فکر می‌کنید که در جایی باید رویداد ذاتی خود مرورگر را استفاده کنید، کافی است که nativeEvent را به عنوان یک attribute اضافه کنید تا به آن دسترسی یابید. رویدادهای سینتتیک متفاوت از رویدادهای ذاتی مرورگر هستند و تناظر یک به یک بین آنها وجود ندارد. برای مثال در onMouseLeave، مقدار event.nativeEvent به رویداد mouseout اشاره دارد. این تناظر بخشی از API عمومی نیست و ممکن است هر موقعی تغییر کند. هر آبجکت SyntheticEvent، attribute های زیر دارد:
boolean bubbles\nboolean cancelable\nDOMEventTarget currentTarget\nboolean defaultPrevented\nnumber eventPhase\nboolean isTrusted\nDOMEvent nativeEvent\nvoid preventDefault()\nboolean isDefaultPrevented()\nvoid stopPropagation()\nboolean isPropagationStopped()\nvoid persist()\nDOMEventTarget target\nnumber timeStamp\nstring type\n\nاز نسخه ۱۷، دیگر
\ne.persist()کاری انجام نمی‌دهد به دلیل این‌کهSyntheticEventپول (pool) نمی‌شود.
\n\nتوجه:
\nاز نسخه ی ۰/۱۴، بازگشت دادن
\nfalseاز یک کنترل کننده ی رویداد، مانع انتشار یک رویداد نمی شود. بجای آن،e.stopPropagation()یاe.preventDefault()، هر کدام به درخور موقعیت باید اجرا شوند
ری‌اکت فرایند نرمال سازی را روی رویدادها انجام می دهد تا در مرورگرهای مختلف، ویژگی های یکسانی داشته باشند.
\nکنترل کنندگان رویدادهایی که در زیر می بینید، در فاز bubbling اجرا می شوند. اگر می خواهید که رویدادی در فاز capture اجرا شود، Capture را به نام رویداد اضافه کنید. مثلا بجای onClick، بنویسید onClickCapture.
نام رویدادها
\nonCopy onCut onPasteویژگی‌ها
\nDOMDataTransfer clipboardDataنام رویدادها
\nonCompositionEnd onCompositionStart onCompositionUpdateویژگی‌ها
\nstring dataنام رویدادها
\nonKeyDown onKeyPress onKeyUpویژگی‌ها
\nboolean altKey\nnumber charCode\nboolean ctrlKey\nboolean getModifierState(key)\nstring key\nnumber keyCode\nstring locale\nnumber location\nboolean metaKey\nboolean repeat\nboolean shiftKey\nnumber whichkey می‌تواند هر کدام از متغیرهای ذکر شده در DOM Level 3 Events spec را داشته باشد.
نام رویدادها
\nonFocus onBlurرویدادهای فوق برای تمام المنت‌های React DOM کار خواهد کرد و نه فقط المنت‌های فرم.
\nویژگی‌ها
\nDOMEventTarget relatedTargetThe onFocus event is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.
function Example() {\n return (\n <input\n onFocus={(e) => {\n console.log('Focused on input');\n }}\n placeholder=\"onFocus is triggered when you click this input.\"\n />\n )\n}The onBlur event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.
function Example() {\n return (\n <input\n onBlur={(e) => {\n console.log('Triggered because this input lost focus');\n }}\n placeholder=\"onBlur is triggered when you click this input and then you click outside of it.\"\n />\n )\n}You can use the currentTarget and relatedTarget to differentiate if the focusing or blurring events originated from outside of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.
function Example() {\n return (\n <div\n tabIndex={1}\n onFocus={(e) => {\n if (e.currentTarget === e.target) {\n console.log('focused self');\n } else {\n console.log('focused child', e.target);\n }\n if (!e.currentTarget.contains(e.relatedTarget)) {\n // Not triggered when swapping focus between children\n console.log('focus entered self');\n }\n }}\n onBlur={(e) => {\n if (e.currentTarget === e.target) {\n console.log('unfocused self');\n } else {\n console.log('unfocused child', e.target);\n }\n if (!e.currentTarget.contains(e.relatedTarget)) {\n // Not triggered when swapping focus between children\n console.log('focus left self');\n }\n }}\n >\n <input id=\"1\" />\n <input id=\"2\" />\n </div>\n );\n}نام رویدادها
\nonChange onInput onInvalid onReset onSubmit برای اطلاعات بیشتر در مورد رویداد onChange، Forms را ببینید.
\nنام رویدادها
\nonError onLoadنام رویدادها
\nonClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit\nonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave\nonMouseMove onMouseOut onMouseOver onMouseUpرویدادهای onMouseEnter و onMouseLeave از المنت ترک شده به المنت وارد شده تکثیر می‌شوند. آنها فاز capture ندارند و bubbling معمول هم در آنها اتفاق نمی افتد.
ویژگی‌ها
\nboolean altKey\nnumber button\nnumber buttons\nnumber clientX\nnumber clientY\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nnumber pageX\nnumber pageY\nDOMEventTarget relatedTarget\nnumber screenX\nnumber screenY\nboolean shiftKeyنام رویدادها
\nonPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture\nonLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOutرویدادهای onPointerEnter و onPointerLeave از المنت ترک شده به المنت وارد شده تکثیر می‌شوند. آنها فاز capture ندارند و bubbling معمول هم در آنها اتفاق نمی افتد.
ویژگی‌ها
\nطبق W3 spec، رویدادهای متعلق به نشانگر ماوس، رویدادهای مربوط به ماوس (Mouse Events) را با ویژگی‌های زیر توسعه می‌دهند.
\nnumber pointerId\nnumber width\nnumber height\nnumber pressure\nnumber tangentialPressure\nnumber tiltX\nnumber tiltY\nnumber twist\nstring pointerType\nboolean isPrimaryنکته ای در مورد پشتیبانی در مرورگرهای مختلف:
\nرویدادهای متعلق به نشانگر ماوس در تمام مرورگرها پشتیبانی نمی شوند. در زمان نوشتن این مقاله مرورگرهایی که از آن پشتیبانی می‌کنند عبارتند از: کروم، فایرفاکس، اج، و اینترنت اکسپلورر. ری‌اکت تعمدا از کد جایگزین برای پشتیبانی در مرورگرهای دیگر استفاده نمی کند، چون این کد باعث افزایش چشمگیر حجم react-dom می‌شود.
اگر اپلیکیشن شما نیازمند رویدادهای نشانگر ماوس است، توصیه می‌کنیم که از کدهای جایگزین third party استفاده کنید.
\nنام رویدادها
\nonSelectنام رویدادها
\nonTouchCancel onTouchEnd onTouchMove onTouchStartویژگی‌ها
\nboolean altKey\nDOMTouchList changedTouches\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nboolean shiftKey\nDOMTouchList targetTouches\nDOMTouchList touchesنام رویدادها
\nonScroll\n\nیادداشت
\nبا شروع ری‌اکت ۱۷، رویداد
\nonScrollدر ری‌اکت به بالا منتشر (bubble) نخواهد شد. این [تغییر] با رفتار مرورگر تطبیق دارد و از رخداد اشتباه جلوگیری می‌کند، هنگامی که یک المنت داخلی که دارای اسکرول است یک رویداد را برای یک والد مرتبه‌بالا رها می‌کند.
ویژگی‌ها:
\nnumber detail\nDOMAbstractView viewنام رویدادها
\nonWheelویژگی‌ها
\nnumber deltaMode\nnumber deltaX\nnumber deltaY\nnumber deltaZنام رویدادها
\nonAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted\nonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay\nonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend\nonTimeUpdate onVolumeChange onWaitingنام رویدادها
\nonLoad onErrorنام رویدادها
\nonAnimationStart onAnimationEnd onAnimationIterationویژگی‌ها
\nstring animationName\nstring pseudoElement\nfloat elapsedTimeنام رویدادها
\nonTransitionEndویژگی‌ها
\nstring propertyName\nstring pseudoElement\nfloat elapsedTimeنام رویدادها
\nonToggle