There are still a number of events with no examples, but I will be adding more! For a full reference without examples, you can see React’s official documentation. If there are any events in particular that you’d like to see examples for, drop me a line at firstname.lastname@example.org.
Keyboard events can be used with any focusable element. This includes HTML form elements, as well as any element with a
onKeyDown is called when a key is depressed
onKeyPress is called after the key is released, but before
onKeyUp is triggered
onKeyUp is called last, after the key is pressed
To check the key that was pressed, use the
key property. This holds a string that represents the key.
shiftKey properties let you check if a modifier key was depressed at the time of the event. These are all booleans.
keyCode property is also available, but try to avoid this as it will make your code harder to read.
onBlur is called when a control loses focus
onFocus is called when a control receives focus
When switching between elements,
onBlur will always be called before
It is probably best to avoid the event object for focus events, as browser support for the underlying events varies significantly. In particular, the
preventDefault() method will not work reliably.
See how focus and blur events are fired by clicking on a button, and using the Tab or shift-Tab key combinations to navigate between them.
onChange is called when the user changes the value in a form control.
onInput is identical to
onChange where possible.
onSubmit is a special prop for
<form> elements that is called when a
<button type='submit'> is pressed, or when the user hits the return key within a field.
event.target object allows you to acces the control’s DOM node. You can then use
event.target.value to get the new value that was entered into the control.
event.preventDefault() method allows you to prevent default behavior. When used within
onSubmit, this will prevent the browser from navigating to a new page. When used within
onChange, it will prevent whatever character was entered from being added to the control.
onClick: a mouse button was pressed and released. Called before
onContextMenu: the right mouse button was pressed.
onMouseDown: a mouse button is depressed
onMouseEnter: the mouse moves over an element or its children
onMouseLeave: the mouse leaves an element
onMouseOut: the mouse moves off of an element, or onto one of its children
onMouseOver: the mouse moves directly over an element
onMouseUp: a mouse button was released
React’s drag and drop events have access to the same event object properties as the mouse events. However, I’d recommend using react-dnd instead of using the raw events where possible. For reference, the drag/drop events are:
button property holds a number that represents which mouse button was pressed. This will be
0 for the left button and
1 for the middle button. Theoretically,
2 represents the right button, but most browsers will not trigger any events other than
onContextMenu when the right button is pressed.
shiftKey allow you to check if a modifier key was pressed on your keyboard when the event was triggered, just like with keyboard events. These are all booleans.
preventDefault() method can be used to cancel default click actions. For example, to prevent the browser from navigating when a link is clicked, you can call
event.preventDefault() within an
There are also a number of positioning properties:
clientY contain the coordinates measured from the top left of the visible part of the page (regardless of the scroll position)
pageY contain the coordinates from the top of the page – which may be currently off-screen due to scrolling.
screenY give the position within the entire screen.
Hover your mouse over the preview area to see the values of the positioning properties.
event.preventDefault(), clicking the link in the preview pane would reload the page.
Try left and right clicking the different buttons to see whether the events work.
onMouseLeave are only called when you move your mosue over the red box, while
onMouseOut are called when the mouse movers over the blue child too.