Updated June 23, 2023
Introduction to JavaScript Event Handler
In JavaScript, an event handler is a set of processes that can include functions or other methods containing program code. These processes are executed in response to specific events. When we have an HTML page, we can validate requirements using JavaScript validation.
Syntax and Parameters
The Event handler is the mechanism, and it is used globally in the variables for accessing the functions in the application. Events are the actions the user performs with the help of any UI technology like HTML etc.
<html>
<body>
<button onclick="user-defined function()"></button>
<!---we can use any number of html tags based on the requirement we will use the tags for developing the UI page--->
<script>
function name()
{
---some javascript logics----
}
</script></body></html>The code example provided earlier demonstrates one of the basic syntaxes used for handling events in web-based applications.
How is Event Handler Done in JavaScript?
Events in programming are actions or occurrences that happen within a system. Various sources, such as user interactions, system states, or external inputs, can trigger them. Events serve as a way for the system to receive information or signals about specific actions or requests made by the user. The basic example, we will see that every web applications have a login page for entering the new user to perform the operations in the application, so if the user enters the username and password or any other credentials needed to enter the application last, we can submit or login the credentials to validate the user data into the server or any other backend. This is one of the event-handling mechanisms for client validations.
Sometimes the user data handles the event mechanism for different scenarios. These elements can be individual elements or a group of elements within the HTML documents loaded in the current browser tab. If the user specifies any type of event performed with the help of the keyboard while pressing the key events, they have a different set of in-built functions for helping the events while the user needs a particular set of operations.
The User also resizes the applications’ windows or performs close operations while the browser window accepts the user requests. When the particular set of events is loading while finishes of the operations, it also shows the events loading completely on the web page itself. After the user submits their data through the HTML form, the backend handles the submission of the form data. If the user requested datas is anything not only in the text, it may be the animations, images, etc.
Examples of JavaScript Event Handler
Following are examples of javascript event handler are:
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<p>Welcome To My Domain</p>
<button onclick="date()">The date and time is:</button>
<script>
function date() {
document.getElementById("ex").innerHTML = Date();
}
</script>
<p id="ex"></p>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome To My Domain</title>
<style>
#sample{
background: #000;
padding: 20px;
margin: 20px 0;
color: lime;
display: block;
font: 48px monospace;
}
</style>
</head>
<body>
<script>
var t;
function alertDelay() {
t = setTimeout(Alertdisplay, 2000);
}
function Alertdisplay() {
alert('Welcome User thank you for choosing the Alert features');
}
function alertClear() {
clearTimeout(t);
}
var i;
function time() {
var date = new Date();
document.getElementById("sample").innerHTML = date.toLocaleTimeString();
}
function timeStop() {
clearInterval(i);
}
var i = setInterval(time, 1000);
</script>
<button onclick="alertDelay();">Show me the Alert After 2 second of your time</button>
<button onclick="alertClear();">Cancel the Alert user settings</button>
<p>Cuurent Time of your Machine is: <span id="sample"></span></p>
<button onclick="timeStop();">Time is stopped</button>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Welcome To My Domain</title>
</head>
<body onload="document.registration.userid.focus();">
<h1>User Login Form</h1>
<form name='sample' onSubmit="return demo();">
<ul>
<label for="userid">Userid:</label>
<input type="text"name="userid"size="10"/><br/></br>
<label for="passid">Password:</label>
<input type="password"name="passid"size="10"/><br/><br/>
<input type="submit"name="submit"value="Submit"/>
</ul>
</form>
<script>
function demo()
{
var uid = document.sample.userid;
var passid = document.sample.passid;
return false;
} function userid_validation(uid,x,y)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len>= y || uid_len< x)
{
alert("User Id should not be empty it must contains length be between "+x+" to "+y);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,x,y)
{
var passid_len = passid.value.length;
if (pass id_len == 0 ||passid_len>= y || passid_len< x)
{
alert("Password should not be empty it must been length between "+x+" to "+y);
pass id.focus();
return false;
}
return true;
}
</script>
</body>
</html>Output:
In the above three examples, we used customized functions to perform user requirements; each function handles its own events in the browser.
Conclusion
It calls the different web APIs to perform the other areas in the web browsers with web extensions like node.js, jquery, etc. We used some application-relevant plugins and events.
Recommended Articles
This is a guide to JavaScript Event Handler. Also discussed the introduction to event handlers in JavaScript and how they are implemented. We’ll also provide a practical example with code. You may also have a look at the following articles to learn more –
