Web Programming TutorialsJavascript Events

Javascript Events

Today we will learn a new concept called events and event handlers. What is an event? An event is something that happens when an action is taking place in the browser. To deal with events we have handlers called as event handlers. These event handlers are nothing but attributes of the HTML tags, that help to perform a specified task when a particular event occurs.

Let us have a look on some of the events.

Event Description
Abort Occurs when the user cancels loading of an image.
Blur Occurs when input focus is removed from a form element (when the user clicks outside a field) or focus is removed from a window.
Click Occurs when the user clicks on a link or form element.
Change Occurs when the value of a form field is changed by the user.
error Occurs when an error happens during loading of a document or image.
focus Occurs when input focus is given to a form element or a window.
Load Occurs when a page is loaded into Navigator.
mouseout Occurs when the user moves the pointer off of a link or clickable area of an image map.
mouseover Occurs when the user moves the pointer over a hypertext link.
reset Occurs when the user clears a form using the Reset button.
Select Occurs when the user selects a form element’s field.
Submit Occurs when a form is submitted (i.e., when the user clicks on a submit button).
unload Occurs when the user leaves a page.

Some of the event handlers are listed below:

  • onclick
  • onhover
  • onfocus
  • onload
  • onmouseover
  • ommouseout
  • onmousein
  • etc.

Let us now try it practically by using it in an html page. Follow the steps.

  1. Create a new folder on desktop and name it as “sec3_ch7”.
  2. Open a new notepad++ document and save it as “events.html” in the newly created folder.
  3. Write the following code in “events.html” and save it.
  4. <!DOCTYPE html>
    <html>
    <head>
    <title>Javascript Events</title>
    </head>
    <body>
    </body>
    </html>
    

    Output of the above code is shown below:

    initial_output_before_javascript
    fig 1

    Let us try some of the examples of events. The task to be performed at any event is performed using functions.

    1. Load event:
      • Load event occurs when a page or an image is loaded into the navigator.
      • So we will write a function giving an alert message that should execute as soon as the page is loaded. The code for function “sayHi()” written in the head section in the script tag is shown below:
      • <script>
        	function sayHi()
        	{
        		alert("Hi");
        	}
        </script>
        
      • As soon as this function executes, it shows an alert message greeting Hi.
      • But we want this function to execute at the page load event, so we need to call this function on the load event. The code written in body tag is shown below:
      • <body onload=”return sayHi()”>
      • Here, onload is the attribute used in body tag to handle the load event.
      • Value of the onload attribute is sayHi(), return is to return the value.
      • Writing return is not compulsory, without it also you can get the output.
      • This means that the function sayHi() should be called when the page is loaded.
      • Output of the above code is shown below:
      • sayHi_function_output
        fig 2

      • Here we see that when page is loaded and an alert saying Hi appears on the page.
    2. Click event:
      • Click event occurs when we click on a hyperlink or a form element.
      • Here, we will just create a button on the webpage. On the click event of this button we will call the above written sayHi() function.
      • Let us create a button having Click Me as its caption. The code written in the body section is given below:
      • <button onclick="return sayHi()">Click Me</button>
      • Here, we have created a button using
        <button>----</button>

        tags with a caption Click Me.

      • The function sayHi() should be called as soon as the user clicks the button. So onclick attribute is used in button tag to handle click event with sayHi() function as its value.
      • Due to this, as soon as the user clicks the “Click Me” button the function sayHi() gets called and an alert message of Hi appears on the webpage as seen on the onload event.
      • The output is shown below:
      • onclick_event_output_with_button
        fig 3

      • We get the alert message Hi when we click on the button Click Me shown above.
    3. Mouseover event:
      • Mouseover event occurs when the user moves the pointer over a hypertext link.
      • Let us have a heading in the body section and perform some task when the mouse pointer is on the heading.
      • The code below is written in the body section below the button:
      • <h1 id="heading" onmouseover="return changeMe()">This is a heading</h1>
      • In the above code, a heading This is a heading is created using h1 tag.
      • An id, “heading” is given to the h1 tag and onmouseover attribute is used to call the changeMe() function during the mouseover event.
      • The code for function changeMe() written in the script tag in the head section below sayHi() function is given below:
      • function changeMe()
        {
              var heading=document.getElementById('heading');
              heading.innerHTML="No Kidding";
        }
      • The logic of the function says that when this function will be executed, the element having id as “heading” will be retrieved and stored in the variable heading. After this the text stored in the heading will be changed to No Kidding by the property innerHTML.
      • This function is called when we place the mouse pointer on the text in the h1 tag, since we know that the mouseover event is handled in the h1 tag calling changeMe() function.
      • Output before the mouse pointer is placed on the text This is a headingis shown below:
      • mouseover_output_before_execution
        fig 4

      • Now when we place the mouse pointer on the text This is a heading, the changeMe() function will be called and will change the text to No Kidding. The output is shown below:
      • mouseover_output_after_execution_of_changeMe
        fig 5

      • Note one thing that as h1 tag is a block level element, it will change even if you move the pointer on the same horizontal line and not on the text specially. Block level element is that element that occupies whole width on the page and that always starts on a new line.
    4. Mouseout event:
      • Mouseout event occurs when the user moves the pointer off of a link or clickable area of an image map.
      • In the above mouseover event we saw how the text This is a heading changed to No kidding.
      • Now in the mouseout event we will further change the text No Kidding again to This is a heading when the mouse moves away from the text.
      • For this we need to add the event handler attribute onmouseout to the h1 tag as shown below:
      • <h1 id="heading" onmouseover="return changeMe()" onmouseout="return changeMeBack()">This is a heading</h1>
      • Value of onmouseout attribute is changeMeBack() function that performs the task of changing the text No Kidding to This is a heading.
      • Logic of changeMeBack() function written in the script tag in head section below, changeMe function is shown below:
      • function changeMeBack()
        {
              var heading=document.getElementById('heading');
              heading.innerHTML="This is a heading";
        }
      • The logic of changeMeBack() function has task opposite to changeMe() function.
      • It gets the element having id as heading in the variable heading and changes it to text This is a heading.
      • The page after execution of changeMe() function and before execution of changeMeBack() function is shown below:
      • mouseover_output_after_execution_of_changeMe
        fig 6

      • Now the output after execution of changeMeBack() function is shown below:
      • mouseover_output_before_execution
        fig 7

      • Thus when mouse is over the text This is a heading, it changes to No Kidding and when mouse moves away from it or goes out, the text No Kidding changes to This is a heading again.
      • Now let’s try some events on form elements.

      • Create a simple form. The code written in the body section is shown below:
      • <form>
        Name : <input type="text" name="name"/>
         <br>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="submit" value="Submit">
        </form>
        
      • Form tag is used to create a form in HTML.
      • We have created a textfield to take name as input and a submit button.
      • The   is used for the non breakable space, to shift the submit button below the textfield.
      • The output of the form is shown below:
      • form_output
        fig 8

      • We will use focusin event and blurout event for the textfield one by one.
    5. Focus event:
      • Focus event occurs when input focus is given to a form element or a window.
      • In this case, we will experience this event when we set the focus on the textfield.
      • When focus is set on the textfield, an alert should come saying “I am in the field”. This is done by writing a userdefined function called focusIn().
      • The function written in script tag in the head section is shown below:
      • function focusIn()
        {
        	alert("I am in the field");
        }
      • When this function executes, it will show an alert saying I am in the field.
      • This function should be called on the focus event of the textfield.
      • The onfocus attribute is added to the input tag of textfield as shown below to achieve this:
      • Name : <input onfocus="return focusIn()" type="text" name="name"/>
      • Here, we have called the function focusIn() during the focus event of the textfield.
      • So now when we place the cursor in the textfield or click on the textfield or set focus on the textfield, an alert message will appear saying I am in the field.
      • The output is shown below:
      • focus_output
        fig 9

      • Next we will see the blur event.
    6. Blur event:
      • Blur event occurs when input focus is removed from a form element (when the user clicks outside a field) or focus is removed from a window.
      • In this case, we will experience this event when we remove focus from the textfield.
      • When focus is removed from the textfield, an alert should come saying “I am out of the field”. This is done by writing a userdefined function called blurOut().
      • The function written in script tag in the head section is shown below:
      • function blurOut()
        {
        	alert("I am out of the field");
        }
      • When this function executes, it will show an alert saying I am out of the field.
      • This function should be called on the blur event of the textfield.
      • The onblur attribute is added to the input tag of textfield as shown below to achieve this:
      • Name : <input onfocus="return focusIn()" onblur="return blurOut()" type="text" name="name"/>
      • Here, we have called the function blurOut() during the blur event of the textfield.
      • So now when we remove focus from the textfield i.e when we click somewhere outside the textfield, an alert message will appear saying I am out of the field.
      • The output is shown below:
      • blur_event_output
        fig 10

      • So here, when we click out of the textfield, we get the alert message I am out of the field.
      • Here, when focus is set in the textfield an alert message I am in the field appears and when the focus is removed, blur event occurs and an alert message I am out of the field appears.

Thus we finished demonstrating some of the events in javascript.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -