Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with events in JavaScript

In this article I will cover some basic JavaScript events. Events are very useful while developing the interactive website. The article will explore Onclick, Onsubmit and MouseOver events in detail.

Introduction:

This tutorial will discuss the some events available in JavaScript. I will explain these JavaScript events using the scenario based examples. You can also refer the HTML files attached with this tutorial.

Description:

The web pages today need to be more and more interactive and useful for the user. To make this interaction possible the web developer needs “events”, an event are the basic building blocks for developing an interactive dynamic web page. For example, selecting input box in html page, submitting a form to server by clicking on submit button, mouse click, keystroke, mouse hovering the link, web page loading. With the help of events the web pages become livelier giving the feeling of control to the users.

As you might have understood from the examples above, events always work in combination with certain function and that function does not initializes unless and until the event takes place. Events are detected by JavaScript.

To understand the mechanism of event in JavaScript, this is important to keep in mind that the purpose of event is to detect an event and perform some function.

JavaScript has been crafted with certain preexisting names that are responsible for various events that occur. For the functions to be performed as a result of an event, the events should be specified, because sometimes the HTML element keeps waiting for the event to occur for a function(s) to run. Following are the brief description of the main purposes for some of events.

Onclick Event:

Onclick create event when a particular text button link clicked on. Following script will compile the idea of onclick event.

Listing 1: Script of Onclick event

<html>
<head>
<Title>Mrbool.com Tutorials - OnClick Event</Title>
<script type="text/javascript">

function popup() {
	alert(" Welcome!. You have clicked on the 'Click Here' button, Resulted an popup.");
}

function DontClick() {
	alert("You have clicked UnInstructed button.");
}

</script>
</head>
<body>
<input type="button" value="Click Here!" onclick="popup()">
<br/>
<input type="button" value="Don't Click!" onclick="DontClick()">
</body>
</html> 
output of onclick event script which is showing a pop up message after clicking the click here button

Figure 1: Above figure is output of onclick event script which is showing a pop up message after clicking the “Click Here!” button.

Onsubmit Event:

The Onsubmit event occurs when the submit button in a form is clicked. After submitting the form the details will send to server or wherever desired. Following script will compile the idea of Onsubmit event.

Listing 2: Script to Onsubmit Event

<HTML>
<head>
<Title>Mrbool.com Tutorials - OnClick Event</Title>
    <script type="text/javascript">
        function Submission() {
            var EmailID= document.getElementById("myEmailID");
            if (EmailID.value.length < 6 || EmailID.value.indexOf('@') == -1) {
                alert ("The Email Address should be atleast 6 character long and should be in correct format.");
                return false;
            }
			
            var OrgPass = document.getElementById ("myPassword");
            var RePass= document.getElementById ("myRePassword");
            if (OrgPass.value.length < 4) {
                alert ("The password must be at least 4 characters long!");
                return false;
            }
			if (RePass.value.length < 4) {
                alert ("The RePassword must be at least 4 characters long!");
                return false;
            }
            if (RePass.value != OrgPass.value) {
                alert ("Both password must be identical!");
                return false;
            }

            var chkAgree = document.getElementById("myAgreement");
            if (!chkAgree.checked) {
                alert ("You must accept the Terms and Conditions!");
                return false;
            }

			alert("Successful Registration.");
            return true;
        }
    </script>
</head>
<body>
    <form id="myForm" method="post" action="http://mrbool.com" onsubmit="return Submission()">
	<b>User Registration:<b>
	<table>
	<tr><td> Email ID:<i>(min. 6 char)</i></td><td></td><td><input type="text" name="myEmailID" id="myEmailID" /></td></tr>
	<tr><td>Password:<i>(min. 4 char)</i></td><td></td><td><input type="password" name="myPassword" id="myPassword" /></td></tr>
	<tr><td>Retype Password:<i>(min. 4 char)</i></td><td></td><td> <input type="password" name="myRePassword" id="myRePassword" /></td></tr>
	<tr><td colspan="3"> <input type="checkbox" name="myAgreement" id="myAgreement" /> 
        <label>I Agree with Terms and Conditions.</label></tr>
	<tr><td></td><td></td><td></td></tr>
       </table>
     
        <input type="Submit" value="Submit" />
    </form>
</body>
</HTML>
Onsubmit event, which accepts user Email ID and password
Validation checking also checks the length of entered Email ID and password

Figure 2 and 3: Above two figure is output of Onsubmit event, which accepts user Email ID and password. If the password enter first time and password enter second time is same then it will show a successful message and send data to destination or server otherwise will open an alert message. Validation checking also checks the length of entered Email ID and password.

OnMouseOver Event:

The OnMouseOver Event facilitates the web developer to change the graphics or appearances of any element on the web page when mouse hovers over it. This is also used to initiate a function. Following script will display the exact meaning of OnMouseOver Event.

Listing 3: Script of OnMouseOver Event
<html>
<head>
<Title>Mrbool.com Tutorials - mouseOver and mouseOut Event</Title>
<script type="text/javascript">

function mouseOver(img)
{
    img.src ="http://a0.twimg.com/profile_images/1164831758/logomrbool.jpg";
}
function mouseOut(img)
{
    img.src ="http://mrbool.com/portal2/mrbool_img/logo.jpg";
}

</script>
</head>
<body>
    <div id="buttonWrapper">
        <img class='imagem_artigo' border="5" src="http://mrbool.com/portal2/mrbool_img/logo.jpg" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />
    </div>
</body>
</html>
OnMouseOver Event
OnMouseOver Event Which switch the two images concurrently

Figure 4 and 5: Above figure is output of OnMouseOver Event Which switch the two images concurrently.

There are various JavaScript event which works for interactive dynamic designing, Few of them are listed here.

onLoad and onUnload events The basic difference between the onload() event handler and onunload event handler is that the onload event will run Javascript code only when everything on the page has finished loading whereas the onUnload event handler occurs when the user exits the page. Hence, both are same except the timing of the event handler is different. One can put both event handlers on the body tag if he wishes JavaScript to run at both times.

onFocus, onBlur events These event handlers are typically used with Form elements, such as text fields, radio buttons, and submit buttons, checkboxes. onFocus is triggered when the cursor is placed on or within a specific form element. onBlur is triggered when the cursor leaves a form element.

Conclusion:

Tutorial covered the basic requirement for the learning the Events in javascript. There are many events in JavaScript; the important ones have been explained in the tutorial while the remaining events will be learned during practice. If you have any query please comment here.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login