• onChange is called when the user changes the value in a form control.• onInput is identical to onChange. Prefer 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.

For onChange, the 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.

The 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 onMouseUp. • onContextMenu: the right mouse button was pressed.• onDoubleClick• onMouseDown: a mouse button is depressed• onMouseEnter: the mouse moves over an element or its children• onMouseLeave: the mouse leaves an element • onMouseMove• 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:

The 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.

The properties altKey, ctrlKey, metaKey and 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.

The 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 <a> element’s onClick handler.

There are also a number of positioning properties:

• clientX and clientY contain the coordinates measured from the top left of the visible part of the page (regardless of the scroll position)• pageX and pageY contain the coordinates from the top of the page — which may be currently off-screen due to scrolling.• screenX and screenY give the position within the entire screen.

Try left and right clicking the different buttons to see whether the events work.

///App.jsimport React from'react'functionshowButton(event){
event.preventDefault()
console.log(event.button ==2?'right':'not right')}exportconstApp=()=><div><buttononClick={showButton}onMouseUp={showButton}>
Right button events don't work reliably with onClick or OnMouseUp
</button><br/><buttononMouseDown={showButton}>
preventDefault stops right button events from working with onMouseDown
</button><br/><buttononContextMenu={showButton}>
Only right button events work with onContextMenu
</button></div>///helper:index.js