J A V A S C RI P T EV E NT S
JavaScript Events are actions or occurrences that happen in the browser. They
can be triggered by various user interactions or by the browser itself.
Common events include mouse clicks, keyboard presses, page loads, and form
submissions. Event handlers are JavaScript functions that respond to these
events, allowing developers to create interactive web applications.
For example -
1. Hovering the mouse over any element / tag or moving the mouse away from
the element is an event.
2. Selecting an element / tag is an event.
3. Pressing a button on the keyboard is an event.
4. Writing in an input box is an Event.
5. Selecting an option from the Select Element is an event.
6. Submitting the form is the event.
There are many such events in JavaScript , some of the events used on general &
daily bases are as follows.
MOUSE EVENTS:
Event Performed Event Handler Description
When mouse click on an
click onclick
element
When the cursor of the
mouseover onmouseover
mouse comes over the element
When the cursor of the
mouseout onmouseout
mouse leaves an element
When the mouse button is
mousedown onmousedown
pressed over the element
When the mouse button is
mouseup onmouseup
released over the element
When the mouse
mousemove onmousemove
movement takes place.
KEYBOARD EVENTS:
Event Performed Event Handler Description
onkeydown & When the user press and
Keydown & Keyup
onkeyup then release the key
FORM EVENTS:
Event Performed Event Handler Description
When the user focuses on
focus onfocus
an element
When the user submits the
submit onsubmit
form
When the focus is away
blur onblur
from a form element
WINDOW/DOCUMENT EVENTS
Event Performed Event Handler Description
When the browser finishes
load onload
the loading of the page
When the visitor resizes
resize onresize
the window of the browser
Let's discuss some examples over events and their handlers.
OnClick Event
1. <html>
2. <head> Javascript Events </head>
3. <body>
4. <script language="Javascript" type="text/Javascript">
5. <!--
6. function clickevent()
7. {
8. document.write("This is Javascript");
9. }
10. //-->
11. </script>
12. <form>
13. <input type="button" onclick="clickevent()" value="Who's this?"/>
14. </form>
15. </body>
16. </html>
MouseOver Event
1. <html>
2. <head>
3. <h1> Javascript Events </h1>
4. </head>
5. <body>
6. <script language="Javascript" type="text/Javascript">
7. <!--
8. function mouseoverevent()
9. {
10. alert("This is Javascript");
11. }
12. //-->
13. </script>
14. <p onmouseover="mouseoverevent()"> Keep cursor over me</p>
15. </body>
16. </html>
Focus Event
1. <html>
2. <head> Javascript Events</head>
3. <body>
4. <h2> Enter something here</h2>
5. <input type="text" id="input1" onfocus="focusevent()"/>
6. <script>
7. <!--
8. function focusevent()
9. {
10. document.getElementById("input1").style.background=" aqua";
11. }
12. //-->
13. </script>
14. </body>
15. </html>
Keydown Event
1. <html>
2. <head> Javascript Events</head>
3. <body>
4. <h2> Enter something here</h2>
5. <input type="text" id="input1" onkeydown="keydownevent()"/>
6. <script>
7. <!--
8. function keydownevent()
9. {
10. document.getElementById("input1");
11. alert("Pressed a key");
12. }
13. //-->
14. </script>
15. </body>
16. </html>
Load event
1. <html>
2. <head>Javascript Events</head>
3. </br>
4. <body onload="window.alert('Page successfully loaded');">
5. <script>
6. <!--
7. document.write("The page is loaded successfully");
8. //-->
9. </script>
10. </body>
11. </html>
INTRODUCTION TO JAVASCRIPT FORM VALIDATION IN
Information is taken from the user through forms but it is important to
check whether the values input by the user are appropriate or not. The
database should always have valid values so that there are no difficulties in
processing.
If the values input by the user are not appropriate then a message is
displayed to the user and he is asked to input valid values. This process is called
validation.
There is no way to validate data in HTML. Normally, validation is
performed on the server side when the user submits the form but
JavaScript provides you the ability to perform validation on the client side.
steps of JavaScript form validation
1. Whenever you validate a form, first of all you check whether the values have
been input in all the fields or not. If it is not so, then a message is displayed
to the user to input the values.
2. After this, you are validated that all the values entered in the fields are in
the appropriate form like do not input any string in the age field etc.
validating for empty fields
There are some fields in a form which need to be filled such as name, email
etc. If you want that the user should not leave that important field blank, then for
this you can perform validation on that field to check if that important field has
any value or not. If there is no value, you can show any message.
For this you can use DOM because whether there is any value in the field or
not will be checked dynamically while submitting the form. You can create a
function in which you can check the value of that field through document object.
This is a very easy process but you should apply it only on those fields in which it
is necessary to enter values, an example of which is given below.
validating appropriate form of input
Along with checking for empty fields, you also have to check whether the
values entered by the user are valid or not. For example, if you have a password
field in your form and you want that the user cannot input less than 8
characters in it , then for this you can take a decision by comparing the user's
input with your validity criteria, an example of which is given below.
1. <script>
2. function validateform(){
3. var name=document.myform.name.value;
4. var password=document.myform.password.value;
5.
6. if (name==null || name==""){
7. alert("Name can't be blank");
8. return false;
9. }else if(password.length<6){
10. alert("Password must be at least 6 characters long.");
11. return false;
12. }
13. }
14. </script>
15. <body>
16. <form name="myform" method="post" action="abc.jsp" onsubmit="return v
alidateform()" >
17. Name: <input type="text" name="name"><br/>
18. Password: <input type="password" name="password"><br/>
19. <input type="submit" value="register">
20. </form>
JavaScript Retype Password Validation
1. <script type="text/javascript">
2. function matchpass(){
3. var firstpassword=document.f1.password.value;
4. var secondpassword=document.f1.password2.value;
5.
6. if(firstpassword==secondpassword){
7. return true;
8. }
9. else{
10. alert("password must be same!");
11. return false;
12. }
13. }
14. </script>
15.
16. <form name="f1" action="register.jsp" onsubmit="return matchpass()
">
17. Password:<input type="password" name="password" /><br/>
18. Reenter Password:<input type="password" name="password2"/><br>
19. <input type="submit">
20. </form>
