Implementing events in javascript

0
1141

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:

  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:

  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++

  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 ++:

  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