JavaScript Lesson 15: Introduction to Events

<Lesson 14> [Contents] <Lesson 16>

In this lesson, we shall learn about the concept of events in JavaScript. What is an event? Any action that triggers the execution of JavaScript program code is called an event. Events are usually triggered by the 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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>

<script language="javascript">
function checktext(form){
var textcontent;
textcontent=form.textbox.value;
if (form.textbox.value=="")
alert("the textbox is empty, please write something in the textbox")
else
document.write(textcontent);
}

</script>

<Form>
<input size="50">
<Input VALUE="Click Here" onClick="checktext(this.form)">
</form>

</body>

</html>

Please click on Example 15.1 to test the output

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.


<Lesson 14> [Table of Contents] <Lesson 16>