Este guia de referência documenta o agregador SyntheticEvent (evento sintético), que faz parte do sistema de eventos do React. Veja o guia Manipulando Eventos para saber mais.
Os manipuladores de evento (event handlers) serão passados como instâncias do SyntheticEvent, um agregador cross-browser que envolve os eventos nativos do navegador. Ambos tem a mesma interface, incluindo stopPropagation() e preventDefault(), porém funcionam de forma idêntica em todos os navegadores.
Caso você pense, por algum motivo, que precisa do evento original do navegador, basta utilizar o atributo nativeEvent para acessá-lo. Os eventos sintéticos são diferentes e não são mapeados diretamente para os eventos nativos do navegador. Por exemplo, em onMouseLeave event.nativeEvent irá apontar para um evento mouseout. O mapeamento específico não faz parte da API pública e pode ser alterado a qualquer momento. Cada objeto do SyntheticEvent tem os seguintes atributos:
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\nNota:
\nA partir da v17,
\ne.persist()não faz nada porque oSyntheticEventnão é mais agrupado.
\n\nNota:
\nA partir da v0.14, retornar
\nfalsede um event handler não irá mais parar a propagação de eventos. Sendo assim, tanto oe.stopPropagation()quanto oe.preventDefault()deve ser acionado manualmente, quando apropriado.
O React normaliza eventos para que eles possam ter propriedades consistentes entre os navegadores.
\nOs manipuladores de evento (event handlers) abaixo são acionados por um evento na fase de propagação (bubbling). Para registrar um manipulador de evento para a fase de captura, adicione Capture como sufixo do nome do evento. Por exemplo, ao invés de usar onClick, você usaria onClickCapture para manipular o evento de clique na fase de captura.
Nome dos eventos:
\nonCopy onCut onPastePropriedades:
\nDOMDataTransfer clipboardDataNome dos eventos:
\nonCompositionEnd onCompositionStart onCompositionUpdatePropriedades:
\nstring dataNome dos eventos:
\nonKeyDown onKeyPress onKeyUpPropriedades:
\nboolean altKey\nnumber charCode\nboolean ctrlKey\nboolean getModifierState(key)\nstring key\nnumber keyCode\nstring locale\nnumber location\nboolean metaKey\nboolean repeat\nboolean shiftKey\nnumber whichA propriedade key pode receber quaisquer valores documentados na especificação de eventos do DOM Level 3.
Nome dos eventos:
\nonFocus onBlurEsses eventos de foco funcionam em todos os elementos do React DOM, não apenas em elementos de formulário.
\nPropriedades:
\nDOMEventTarget relatedTargetO evento onFocus é chamado quando o elemento (ou algum elemento dentro dele) recebe o foco. Por exemplo, é chamado quando o usuário clica em um input de texto.
function Example() {\n return (\n <input\n onFocus={(e) => {\n console.log('Focos no input');\n }}\n placeholder=\"onFocus é acionado quando você clica nesta entrada.\"\n />\n )\n}O manipulador de eventos onBlur é chamado quando o foco deixa o elemento (ou deixa algum elemento dentro dele). Por exemplo, é chamado quando o usuário clica fora de um input de texto focado.
function Example() {\n return (\n <input\n onBlur={(e) => {\n console.log('Disparado porque esta entrada perdeu o foco');\n }}\n placeholder=\"onBlur é acionado quando você clica nesta entrada e clica fora dela.\"\n />\n )\n}Você pode usar currentTarget e relatedTarget para diferenciar se os eventos de foco ou desfoque originaram-se de fora do elemento pai. Aqui está uma demonstração que você pode copiar e colar que mostra como detectar o foco de um elemento filho, focalizando o próprio elemento e o foco entrando ou saindo de toda a subárvore.
function Example() {\n return (\n <div\n tabIndex={1}\n onFocus={(e) => {\n if (e.currentTarget === e.target) {\n console.log('focos dele');\n } else {\n console.log('focus no elemento filho', e.target);\n }\n if (!e.currentTarget.contains(e.relatedTarget)) {\n // Não acionado ao trocar o foco entre os elementos filhos\n console.log('foco entrou no proprio elemento');\n }\n }}\n onBlur={(e) => {\n if (e.currentTarget === e.target) {\n console.log('desfoque dele');\n } else {\n console.log('desfoque no elemento filho', e.target);\n }\n if (!e.currentTarget.contains(e.relatedTarget)) {\n // Não acionado ao trocar o foco entre os elementos filhos\n console.log(focos a esquerda'');\n }\n }}\n >\n <input id=\"1\" />\n <input id=\"2\" />\n </div>\n );\n}Nome dos eventos:
\nonChange onInput onInvalid onReset onSubmit Para mais informações sobre o evento onChange, veja Formulários.
\nNome dos eventos:
\nonError onLoadNome dos eventos:
\nonClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit\nonDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave\nonMouseMove onMouseOut onMouseOver onMouseUpOs eventos onMouseEnter e onMouseLeave propagam do elemento do lado esquerdo ao evento que está entrando, ao invés do bubbling comum e não tem uma fase de captura.
Propriedades:
\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 shiftKeyNome dos eventos:
\nonPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture\nonLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOutOs eventos onPointerEnter e onPointerLeave propagam do elemento do lado esquerdo ao evento que está entrando, ao invés do bubbling comum e não tem uma fase de captura.
Propriedades:
\nComo definido na especificação da W3, os eventos de ponteiro estendem os Eventos do Mouse com as seguintes propriedades:
\nnumber pointerId\nnumber width\nnumber height\nnumber pressure\nnumber tangentialPressure\nnumber tiltX\nnumber tiltY\nnumber twist\nstring pointerType\nboolean isPrimaryUma nota em relação a compatiblidade entre navegadores:
\nOs eventos de ponteiro ainda não tem suporte em todos os navegadores (no momento da escrita deste artigo, navegadores que oferecem suporte são: Chrome, Firefox, Edge e Internet Explorer). O React deliberadamente não fornece um polyfill para outros navegadores, pois um polyfill que seja compilante com os padrōes aumentaria drasticamente o tamanho do bundle do react-dom.
Se sua aplicação necessita de eventos de ponteiro, recomendamos adicionar um polyfill de terceiros.
\nNome dos eventos:
\nonSelectNome dos eventos:
\nonTouchCancel onTouchEnd onTouchMove onTouchStartPropriedades:
\nboolean altKey\nDOMTouchList changedTouches\nboolean ctrlKey\nboolean getModifierState(key)\nboolean metaKey\nboolean shiftKey\nDOMTouchList targetTouches\nDOMTouchList touchesNome dos eventos:
\nonScroll\n\nNota
\nComeçando com React 17, o evento
\nonScrollnão borbulha no React. Isso corresponde ao comportamento do navegador e evita a confusão quando um elemento rolável aninhado dispara eventos em um pai distante.
Propriedades:
\nnumber detail\nDOMAbstractView viewNome dos eventos:
\nonWheelPropriedades:
\nnumber deltaMode\nnumber deltaX\nnumber deltaY\nnumber deltaZNome dos eventos:
\nonAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted\nonEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay\nonPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend\nonTimeUpdate onVolumeChange onWaitingNome dos eventos:
\nonLoad onErrorNome dos eventos:
\nonAnimationStart onAnimationEnd onAnimationIterationPropriedades:
\nstring animationName\nstring pseudoElement\nfloat elapsedTimeNome dos eventos:
\nonTransitionEndPropriedades:
\nstring propertyName\nstring pseudoElement\nfloat elapsedTimeNome dos eventos:
\nonToggle