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.
- Create a new folder on desktop and name it as “sec3_ch7”.
- Open a new notepad++ document and save it as “events.html” in the newly created folder.
- Write the following code in “events.html” and save it.
- 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:
- 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:
- 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:
- Here we see that when page is loaded and an alert saying Hi appears on the page.
- 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:
- 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:
- We get the alert message Hi when we click on the button Click Me shown above.
- 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:
- 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:
- 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:
- 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:
- 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.
- 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:
- 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:
- 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:
- Now the output after execution of changeMeBack() function is shown below:
- 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.
- Create a simple form. The code written in the body section is shown below:
- 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:
- We will use focusin event and blurout event for the textfield one by one.
- 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:
- 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:
- 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:
- Next we will see the blur event.
- 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:
- 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:
- 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:
- 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.
<!DOCTYPE html> <html> <head> <title>Javascript Events</title> </head> <body> </body> </html>
Output of the above code is shown below:
Let us try some of the examples of events. The task to be performed at any event is performed using functions.
<script> function sayHi() { alert("Hi"); } </script>
<body onload=”return sayHi()”>
<button onclick="return sayHi()">Click Me</button>
<h1 id="heading" onmouseover="return changeMe()">This is a heading</h1>
function changeMe() { var heading=document.getElementById('heading'); heading.innerHTML="No Kidding"; }
<h1 id="heading" onmouseover="return changeMe()" onmouseout="return changeMeBack()">This is a heading</h1>
function changeMeBack() { var heading=document.getElementById('heading'); heading.innerHTML="This is a heading"; }
Now let’s try some events on form elements.
<form> Name : <input type="text" name="name"/> <br> <input type="submit" value="Submit"> </form>
function focusIn() { alert("I am in the field"); }
Name : <input onfocus="return focusIn()" type="text" name="name"/>
function blurOut() { alert("I am out of the field"); }
Name : <input onfocus="return focusIn()" onblur="return blurOut()" type="text" name="name"/>
Thus we finished demonstrating some of the events in javascript.