Hello, in this tutorial, we'll learn how to add events to your HTML elements so users can interact with your application.
Events
Learn how to add events to elements so users can interact with your app.
Adding Events
React has the same events that normal DOM elements have.
Here is a list of them:
onClick: Fires when the element is clicked.
onDoubleClick: Fires when the element is double-clicked.
onMouseDown: Fires when a mouse button is pressed down on the element.
onMouseUp: Fires when a mouse button is released over the element.
onMouseMove: Fires when the mouse pointer is moved over the element.
onMouseOver: Fires when the mouse pointer enters the element.
onMouseOut: Fires when the mouse pointer leaves the element.
onKeyDown: Fires when a key on the keyboard is pressed down while the element has focus.
onKeyUp: Fires when a key on the keyboard is released while the element has focus.
onKeyPress: Fires when a key on the keyboard is pressed and released while the element has focus.
onFocus: Fires when the element receives focus (e.g., through clicking or tabbing).
onBlur: Fires when the element loses focus.
onChange: Fires when the value of a form element changes (e.g., input, select).
onSubmit: Fires when a form is submitted.
onInput: Fires when the value of an input element changes.
onLoad: Fires when the element and all its dependent resources (e.g., images) have finished loading.
onUnload: Fires when the page is about to be unloaded (e.g., when the user navigates away).
onResize: Fires when the size of the browser window or an element is changed.
onScroll: Fires when the content of an element is scrolled.
onContextMenu: Fires when the user right-clicks on the element to open the context menu.
To add these events, just include them in the open HTML element tag, followed by "=" and a pair of open and closed curly brackets like this:
<h1 onClick={ }>Codeible</h1>
In the example, a onClick event is added to the h1 element. So when you click on it, it'll execute whatever it is inside the curly brackets.
Handling the Events
In the above section, you learned how to add a event to an element. Now, we'll see how to handle the event. This means to define what will happen when the event is triggered.
Method 1
One method is to insert a function inside the curly brackets and then define what it will do.
<h1 onClick={ ( event ) => { alert("Click Triggered"); } }>Codeible</h1>
So when the h1 element is clicked on, it'll execute the function that we inserted in the curly backets and display the alert popup.
The event object is optional to be included but it is a object that is passed into the function when the event is trigger. It is used to get information about the event. So if you need information like mouse position, you should include it.
Method 2
Another method is to define a function separated from the HTML and insert that in between the curly brackets.
function MyFirstComponent(){
function displayMessage(event){
console.log(event);
}
return (
<h1 onClick={ displayMessage } >Codeible</h1>
);
}
For this method, it is similar to method 1 except the handler function is defined outside of the HTML.
Like in method 1, the event object is a optional parameter but should be included if you want information about the event.
That is all for this tutorial. Now you are able to add events to your HTML so people can interact with your app!
