У цьому довідковому матеріалі описана обгортка SyntheticEvent, яка є частиною системи подій React. Дивіться інструкцію Обробка подій для більш детальної інформації.
Ваші обробники подій отримують екземпляр SyntheticEvent — кроcбраузерну обгортку над нативною подією браузера. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи stopPropagation() та preventDefault(). Ця обгортка допомагає спрацьовувати різним подіям однаково у всіх браузерах.
Якщо ви усвідомили, що вам з якоїсь причини потрібно отримати нативну браузерну подію, то ви просто можете використати атрибут nativeEvent. Синтетичні події відрізняються від нативних подій браузера. Наприклад, в onMouseLeave event.nativeEvent вказуватиме на подію mouseout. Конкретне відображення не є частиною загальнодоступного API і може змінитися в будь-який час. Нижче наведено перелік атрибутів об’єкта SyntheticEvent:
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Примітка:
\nПочинаючи з версії v0.14, повернення
\nfalseз обробника подій більше не припиняє розповсюдження події. Замість цього вам потрібно самотужки викликатиe.stopPropagation()абоe.preventDefault().
Події SyntheticEvent містяться в пулі. Це означає, що об’єкт SyntheticEvent буде використаний знову, а також всі його властивості будуть очищені після спрацювання функції зворотнього виклику події.\nЦе було зроблено з міркувань збереження продуктивності.\nТаким чином, ви не можете отримати доступ до події асинхронним способом.
function onClick(event) {\n console.log(event); // => очищений об'єкт.\n console.log(event.type); // => \"click\"\n const eventType = event.type; // => \"click\"\n\n setTimeout(function() {\n console.log(event.type); // => null\n console.log(eventType); // => \"click\"\n }, 0);\n\n // Не спрацює. this.state.clickEvent зберігає тільки пусті значення.\n this.setState({clickEvent: event});\n\n // Ви все ще можете експортувати властивості події.\n this.setState({eventType: event.type});\n}\n\nПримітка:
\nЯкщо ви все-таки хочете звернутися до властивостей події асинхронно, вам необхідно зробити виклик
\nevent.persist()на події. Тоді ця подія буде вилучена з пулу, в свою чергу це дозволить вашому коду утримувати посилання на цю подію.
React нормалізує події таким чином, що вони мають одинакові властивості в усіх браузерах.
\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 whichВластивість key може приймати будь-які із задокументованих у DOM Level 3 Events spec значень.
Назви подій:
\nonFocus onBlurЦі події працюють зі всіма React- та DOM-елементами, а не тільки з елементами форм.
\nВластивості:
\nDOMEventTarget relatedTargetНазви подій:
\nonChange onInput onInvalid onReset onSubmit Для більш детальної інформації про подію onChange, відвідайте Форми.
\nНазви подій:
\nonError onLoadНазви подій:
\nonClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit\nonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave\nonMouseMove onMouseOut onMouseOver onMouseUpПодії onMouseEnter та onMouseLeave розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдження події, а також не мають фази перехоплення.
Властивості:
\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 розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдження події, а також не мають фази перехоплення.
Властивості:
\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Події курсору ще не підтримуються всіма браузерами (на момент написання цієї статті підтримуються браузери: Chrome, Firefox, Edge, and Internet Explorer). React свідомо не поліфілізує підтримку в інших браузерах тому що це значно би збільшило розмір react-dom.
Якщо вашому застосунку необхідно використовувати події курсору, то ми радимо встановити сторонній поліфіл.
\nНазви подій:
\nonSelectНазви подій:
\nonTouchCancel onTouchEnd onTouchMove onTouchStartВластивості:
\nboolean altKey\nDOMTouchList changedTouches\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nboolean shiftKey\nDOMTouchList targetTouches\nDOMTouchList touchesНазви подій:
\nonScrollВластивості:
\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