An event merely denotes an action, and this action results in a change in the state of an object. If you are building a web page, there are actions that you will be expecting your users to take when they visit your website when it is launched.
You can use HTML or other frameworks to instantiate the frame of these events, then include JavaScript code to authenticate them. For example, when a user clicks on the browser, add JS code, which will execute the task to be performed on the event.
What is Event Handling?
Event handling is the process of responding to events. Both the browser and the user can initiate HTML events. Developers can use these events to launch responses that are written in JavaScript, such as responses that close windows, display messages to users, validate data, and more.
These are a few illustrations of HTML events:
The loading of an HTML webpage
A change to an HTML input field
The clicking of an HTML button
Mouse click action by a user
Complete loading of a web page
Complete upload of a web page
A user makes some visible changes on an input field.
A user submits an HTML form.
A user moves a cursor around objects or documents on a web page.
Examples of HTML Events and their Handlers
HTML events are grouped into four major parts.
1. Mouse Events
Events performed in mouse events include the following:
| Event | Event Handler |
| Click | onclick |
| Mouseover | onmouseover |
| Mouseup | onmouseup |
| Mousedown | onmousedown |
| Mouseout | onmouseout |
| Mousemove | onmousemove |
2. Window/Document Events
Window and document events and event handlers are as follows:
| Event | Event Handler |
| Resize | onresize |
| Load | onload |
| Unload | onunload |
3. Form Events
Form events and event handlers are as follows:
| Events | Events Handlers |
| focus | onfocus |
| submit | onsubmit |
| blur | onblur |
| change | onchange |
4. Keyboard Events
Keyboard has one event and one event handler, which are keydown and keyup, with the event handlers onkeydown and onkeyup.
Note: The handling and validation of user input, user actions, and browser actions that must be carried out each time a page loads or is closed can be done with the aid of event handlers. It is also necessary for procedures that must be carried out after a user clicks a button or enters information.
Several methods can be used to enable JavaScript to interact with events to put this into practice. HTML event attributes allow for the direct execution of JavaScript code, the calling of JavaScript functions, or the assignment of custom event handler functions to HTML elements.
Example 1: onclick event handler
<!DOCTYPE html>
<html>
<body>
<!-- this is an onclick event example using a html button -->
<button onclick="document.getElementById('dmo').innerHTML= greet()">Welcome, Click me now! </button>
<h2 id="dmo"></h2>
</body>
<script>
// greet function will welcome a user
function greet(){
document.write("hello how are you doing today? Today is ......", Date())
}
</script>
</html>Example 2: onmouseover event handler
<html>
<head>
<!-- this an html code it display the text in h1 once the page loads-->
<h1> Javascript Events TEST </h1>
</head>
<body>
<script>
// this function will output the content in the alert box when you mouse over in the browser
function mouseoverevent()
{
alert("You are testing the mouse over event function");
}
</script>
<p onmouseover="mouseoverevent()"> Draw your Cursor closer to me</p>
</body>
</html> Example 3: onkeydown event handler
<html>
<head> Javascript Events TEST</head>
<body>
<!-- this an html code it display the text in h2 once the page loads-->
<h2> Type on your Keyboard to get an event response</h2>
<!-- the code below propmts a user to make an input, like try entering a text or number -->
<input type="text" id="dmo" onkeydown="keydownevt()"/>
<script>
// this function alert the user know the moment there was a click on any of the keys
function keydownevt()
{
document.getElementById("dmo");
alert("ooppssssssss.......you just pressed a keyright now");
}
</script>
</body>
</html>
Example 4: onmouseout event handler
<!DOCTYPE html>
<html>
<body>
<!-- this an html code it display the text in h1 once the page loads-->
<h1 id="dmo">Test Mouse over me, if my color changes, then the event test was successful</h1>
<script>
document.getElementById("dmo").onmouseout = function() {mouseOutTest()};
// this function alert the user know the moment there mouse out as it changes the text color
function mouseOutTest() {
// this code changes the text color to blue using the style.color function
document.getElementById("dmo").style.color = "blue";
}
</script>
</body>
</html>
Example 5: onchange event handler
<!DOCTYPE html>
<html>
<body>
<!-- this an html code it display the text in h1 once the page loads-->
<h1>Please enter any letter in small letter, then after click enter,</h1>
<h1>if it changes to upper case, then you successfully implemented the onchange event handler</h1>
<!-- the code below propmts a user to make an input, like try entering a text or number -->
<input type="text" id="nm", value="">
<script>
document.getElementById("nm").onchange = function() {myFunction()};
// this function will change every lowercase text to uppercase
function myFunction() {
var v = document.getElementById("nm");
x.value = v.value.toUpperCase();
}
</script>
</body>
</html>
Conclusion
When a specific event occurs, a piece of code known as an “event handler” receives instructions from a user-defined JavaScript function. It is also viewed as an event listener that executes, listens to, and returns the outcomes of an event.