We know that JavaScript and HTML work together for a web page to function. But how does the work happen? Many events happen when you use a browser to experience a web page. These events are responsible for making the JavaScript language interact with the HTML.
What are events? Any action taken by the user or the browser to manipulate the web page will be considered as an event, for example: when you click a button on the page, close or open or resize the webpage, loading or reload the web page, etc.
Web page developers use these events to code a JavaScript response to the event happening, which helps the JavaScript interact with the HTML. These interactions allow the webpage to perform the various actions that are assigned by the user or the browser. To trigger a particular JavaScript code, the set of events responsible should be triggered. They are a part of the HTML and DOM (Document Object Model) [level 3].
About Event Type: onclick
The most common event type is the onclick. The event is carried out when the user clicks the mouse's left button. Various customized validation or any important warning etc, can be attached to this event by the user depending upon the requirements.
Following is an example of a JavaScript code using onclick event type:
<html>
<head>
<script type = "text/javascript">
<!--
function attemptnumber() {
alert("First attempt")
}
//-->
</script>
</head>
<body>
<p>Use the provided button for calling the function</p>
<form>
<input type = "button" onclick = "attemptnumber()" value = "Present Attempts" />
</form>
</body>
</html>The output for the program is:
Use the provided button to call the function
Button display of name Present Attempts on clicking it will open to the text First attempt.
About Event Type: onsubmit
The event is carried out when the user performs the action of submitting forms. Various customized validation or any important warning etc, can be attached to this event by the user depending upon the requirements.
Following is an example of a JavaScript code using onsubmit event type:
<html>
<head>
<script type = "text/javascript">
<!--
function attempts() {
The data input
........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return attempts()">
.......
<input type = "submit" value = "FormSubmission" />
</form>
</body>
</html>About Event Type: onmouseover and onmouseout
If you want to include the hover action of the cursor, you can experiment with the onmouseover and onmouseout event types. The onmouseover event type helps you to assign trigger responses to elements on the web page to respond when you hover the cursor over them, and the onmouseout event type helps to generate trigger responses when you move the cursor out from that element.
Following is an example of a JavaScript code using onmouseover and onmouseout event types:
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Event type: Mouse Over");
}
function out() {
document.write ("Event type: Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Hover the mouse over the element to see the input data provided.</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> Data input for the division </h2>
</div>
</body>
</html>The output for the program is:
Hover the mouse over the element to see the input data provided.
Data input for the division
