Implementing events in javascript

0
1871

In this session we will study functioning of some events in an java script. When the page loads, that is an event,When the user clicks a button, that too is an event.Another examples of events are like pressing any key, closing window, resizing window etc.

  • So to understand the functionality of events follow the steps given below :

  1. Let’s take an example of an onload event ,so write the code in Notepad++ or any other text editor:

     <html>
    <title>events</title>
    <head>
    
    <script>
    		function sayHi()
    		{
    				alert("Hi Welcome to Eduonix");
    		}
    </script>
    
    </head>
    
    
    <body   onload="return sayHi()">
    <h1>This is an example of an event</h1>
    </body>
    </html>
    
  2. After writing the code you will have the following view of your notepad++ window :
  3. v1

  4. Now when you open it in the browser you will get the following output :
  5. v2

  6. So,this was an onload() event when the page gets loaded at that time it will display the message in the dialog box.
  • Event : ondblclick()
  1. Now to understand the ondblclick() event write the given code in your Notepad++ editor:

    <html>
    <title>events</title>
    <head>
    
    <script>
    		function sayHi()
    		{
    				alert("Hi Welcome to Eduonix");
    		}
    </script>
    
    </head>
    
    <body>
    <button  ondblClick="return sayHi()">Click Me</button>
    <h1>This is an example of an event..when we click an button the event will encounter and dispaly an Dialog Box onClick</h1>
    </body>
    </html>     
    
  2. Hence ,you notepad++ window will look like as shown below :
  3. v3

  4. Now when you open it on the browser you will have following output :
  5. v4

  6. So ,When you double click on the Click Me button then at that time it will display the message.
  • Event : onmouseover() and onmouseout()
  1. Ok ,now lets have a look on onmouseover() and onmouseout() events
  2. So to understand its working write the given code in your text editors for example Notepad++
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function over() {
       alert("Mouse Over");
    }
    function out() {
       alert("Mouse Out");
    }
    //-->
    </script>
    </head>
    <body>
    <div onmouseover="over()" onmouseout="out()">
    <h2> This is inside the division </h2>
    </div>
    </body>
    </html>
    
  3. Then your notepad++ window will have the following look as shown below :
  4. v5

  5. Now when you open it on the browser you will have the following outputs :
  6. Output when the Mouse Over event is ocurred .

    v4.1

    .Output When the Mouse Out event is occured :

    v4.2

  • Event : onfocus,onblur

  1. So write the following code in Notepad ++:

    <!Doctype html>
    <html>
    	<head>
    		<title>Javascript Events</title>
    		<script>
    			function focusIn(){
    				alert('I am in the field');
    			}
    			
    			function blurOut(){
    				alert('I am out of the field');
    			}
    		</script>
    	</head>
    	<body>
    	<form>
    		Name: <input onfocus="return focusIn()" onblur="return blurOut()" type="text" name="name" /><br />
    		<input type="submit" value="Submit" />
    	</form>
    	</body>
    </html>
    
  2. After writing the code your window will look like as shown below :
  3. v4.3

  4. Save the program using .html extention and run it You will get the output:
  5. v7

    v8

  • Thus we have successfully understood the implementation of events in javascript.
  • LEAVE A REPLY

    Please enter your comment!
    Please enter your name here