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.
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
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.
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.
<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>
<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 ""
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:
<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.
Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy