Events are action that can be detected when user perform certain action. We have a number of events which is used to perform desire task such as onclick event when user click on object, on change event is called when user select any item from list or mouse event to perform some action based upon mouse movement.
By using java script we have a capability to create dynamic web pages. Events are certain action that can be detected by java script. Every element on web page has certain type of events which can trigger a java script function.
Types of events in java script
onclick event : onclick event triggered any java script function when object is clicked by user.
onchange event : onchange event triggered java script function when user select any value from select tag or change the content of textbox control.
onload event : onload event triggered java script function when any document or control is loaded in browser.
onunload event : onunload event triggered java script function when any document or control is unloaded in browser.
onfocus event : onfocus event triggered java script function when any document or control got focus and comes in use.
onblur event :onblur event triggered java script function when any document or control lose focus or got unused.
onSubmit event : onSubmit event triggered java script function to validate all the fields in web form before submitting the content to web server.
onMouseOver event : onMouseOver event triggered java script function when mouse move upon surface of the control.
Following example demonstrate all these events in java script
Example 1 : OnClick event in java script
Write down following code to create an html web form.
<body>
<label id="lblFirstNumber">First Number</label>
<input id="txtFirstNumber" type="text" style="margin-left:50px;width:150;" /> <br /><br />
<label id="lblSecondNumber">Second Number</label>
<input id="txtSecondNumber" type="text" style="margin-left:30px;width:150;" /><br /><br />
<input type="text" id="txtResult" style=" margin-left:70px;width:200px;visibility:hidden " /> <br />
<input type="button" onclick="addNumber()" id="btnAddNumber" value="Add Number" style="margin-left:70px;width:150;" />
</body>
Create a function named addNumber() in script block of head tag. The code for creating method in java script is as follows.
<script type="text/javascript">
function addNumber() {
var num1 = txtFirstNumber.value;
var num2 = txtSecondNumber.value;
var res = parseInt(num1) + parseInt(num2); //parseInt(string) method is used to convert string to int.
document.getElementById("txtResult").style.visibility = "visible";
document.getElementById("txtResult").value = res;
}
</script>
Output of the following code snippet is as follows
When user click on Add Number button then the output comes as follows.
Example 2: OnChange event in java script
Following example demonstrate use of OnChange event in java script.
Write down following code snippet to create a html document.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getValue() {
txtRes.value = txtText.value;
}
</script>
</head>
<body>
<input type="text" id="txtText" style="margin-left:50px;width:150px;height:70px" onchange="getValue()" /> <br />
<input type="text" id="txtRes" style="margin-left:50px;width:150px;height:70px" />
</body>
</html>
Output of the following code snippet is as follows
As well as user change the focus from current text box then textchange event is called and second text box will fill with that text.
Example 3: Onload event
Following example demonstrate use of onload event in java script.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function getValue() {
alert("Window is loaded in memory.");
}
</script>
</head>
<body onload="getValue()">
</body>
</html>
Output of the following code snippet is as follows
An alert ( ) message should be displayed as well as document is loaded on window.
Anonymous User
18-Jun-2019Thanks for the informative post.