Lesson 15: Introduction to Events

❮ Previous Lesson Next Lesson ❯

In this lesson, we shall learn about the concept of events in JavaScript. What is an event? Any action that triggers the execution of the JavaScript program code is called an event. Events are usually triggered by web users. For example, clicking the mouse is an event, dragging the mouse over a hyperlink is also an event. There are three categories of events in JavaScript, namely events associated with forms, events associated with links and events associated with windows. In this lesson, we shall only discuss the onClick event.

15.1 Events For forms

Event	Description
onclick	Occurs when the user clicks a mouse button, checkbox, radio button, submit button or reset button
onfocus	Occurs when the user clicks the mouse button or uses the tab to bring attention to certain form elements such as a text box.
onselect	Occurs when the user selects text by dragging the mouse across a certain part of the text.
onblur	Occurs when the user removes the focus from a currently in-focus form element.
onchange	Occurs when the users alter the input into form elements, such as a text box.
onsubmit	Occurs when the users click the Submit button of a form.

View more events

15.2 Writing Scripts for the Events

We need to write JavaScript code for an event so that the triggered event can do something. Here, we are showing you how to write code for the onClick event. In Example 15.1, we present two form elements to the users, one of them is the textbox and the other one is the Click button. We also wrote a function checktext(form) to process the text entered by the users. If the user does not enter anything, he or she will be presented with a pop-up alert dialog to remind he or she the textbox is empty. Otherwise, the web page will show the text entered by the user.

Example 15.1: Writing script for an onClick event

This JavaScript will check wthether the user has enter some text into a text box or not. If the user has not written anything in the text box, he or she will be prompted to do so. If the user has written something in the text box, the text will be display on the web page.

The JavaScript

<script">
function checktext(){
var textcontent;
textcontent=document.getElementById("mytext").value;
if (textcontent=="")
alert("the textbox is empty, please write something in the textbox")
else
document.getElementById("yourtext").innerHTML=textcontent;

</script>

The HTML

<input type="text" id="mytext" size="50">
<p>You have written "<span style="font-weight:bold" id="yourtext"></span>"</p>
<Input Type="button" VALUE="Check" onClick="checktext()">

You have written ""

15.2: Another example of an onclick event

Here is another example of onClick event. In this example, we created a combo box using the SELECT and the OPTION elements of the form. We have also created a loadHtml function to let the user select the item and load the web page indicated in the combo box by clicking the button. The code is follow:

Example 15.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Example 15.2: Another OnCick event for JavaScript</title>
</head>
<body>

<p>
<script>
function loadHtml(form){
if (form.list.selectedIndex==0) location="art.html"
if (form.list.selectedIndex==1) location="astro.html"
if (form.list.selectedIndex==2) location="bestsell.html"
if (form.list.selectedIndex==3) location="business.html"
if (form.list.selectedIndex==4) location="children.html"
if (form.list.selectedIndex==5) location="computer.html"
if (form.list.selectedIndex==6) location="health.html"
if (form.list.selectedIndex==7) location="mystery.html"
if (form.list.selectedIndex==8) location="horror.html"
if (form.list.selectedIndex==9) location="nonfic.html"
if (form.list.selectedIndex==10) location="romance.html"
if (form.list.selectedIndex==11) location="science.html"
if (form.list.selectedIndex==12) location="scific.html"
if (form.list.selectedIndex==13) location="self.html"
if (form.list.selectedIndex==14) location="sports.html"
if (form.list.selectedIndex==15) location="travel.html"
if (form.list.selectedIndex==16) location="young.html"
if (form.list.selectedIndex==17) location="music.html"

}
</script>

<Form ACTION="" METHOD="GET">
<SELECT size="4">
<OPTION>Art and Drawing
<OPTION>Astronomy
<OPTION>Best Sellers
<OPTION>Business & Investment
<OPTION>Children Books
<OPTION selected>Computer & Internet
<OPTION>Health & Fitness
<OPTION>Mystery
<OPTION>Horror & Thriller
<OPTION>Non Fiction
<OPTION>Romance
<OPTION>Science & Nature
<OPTION>Science Fiction
<OPTION>Self Improvement
<OPTION>Sports & Games
<OPTION>Travel
<OPTION>Young Readers' Corner
<OPTION>Music
</SELECT>
<br><br><INPUT value="Select a category and Click here" onClick="loadHtml(this.form)">
</FORM>

</body>

Click on Example 15.2 to view the output.

❮ Previous Lesson Next Lesson ❯