Event Handling In JavaScript: Image, Form, Link, Buttons, Fileupload
Table of Contents
What Is An Event?
An instance that happens by interaction of user (or operating system or application program) and computer can detect it and give a response to it is called event. For example, when user click on any icon or, program gives the response by executing the command. The clicking of the mouse is an even.
Events describe actions that occur as a result of user interaction with a web page, or other browser related activities. The events may occur as follows:
- When a user clicks a button or hyperlink.
- When a user moves the mouse pointer over the html element.
- When a user enters data into the form object such as textbox, or selects data in the textbox.
- When a web page loads or unloads.
- When an error occurs in loading the web page or when downloading process of page completes etc.
Amazon Purchase Links:
*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!
Event Handling and Event handler:
The browser waits for events to occur. When an event occurs, the browser performs a processing, which is related to that event. The processing that is performed in response to the occurrence of an event is known as even handling. The code that performs this processing called an event handler. I can be said that an even handler is a piece of code that is executed when an event occurs. Event handler are associated with different events.
For example, an event handler is associated with the click event of the button. When the button is clicked, this event handler is executed. You can associate events with most of the major objects found in web pages. These objects include links, images, image maps, form elements, and windows etc.
JavaScript recognizes special event handling attributes for each of the html elements. These attributes are used to specify the event handlers (JavaScript code) to be executed in response to a particular event.
The general syntax to attach an event handler with html tag is as follows.
<html_tag eventName=”code”>
Where
Html_tag:
Represents the html tag such as <A>, <body> etc.
EventName:
Represent the name of event handling attribute. All event attributes start with the word ‘on’. For example, onClick, onMouseOver, onSubmit, onError etc.
Code:
Represent the JavaScript code. It is the actual javaScript code to be executed when the specified even occurs. It is placed between the quotes.
In general, you can insert multiple javascript statements for the value of an event attributes. In this case, multiple Javascript statements must be separated by semicolons (;). Usually, a single function call statement is given as value of an event attribute. This makes the event handling code easier to understand and to debug.
For example, if you want to handle the event associated with the click event of button. The code is written as;
<input type= “button” onClick=”code”>
It may be noted that if you give the attribute value enclosed in double quotes (“”), then you must use the single quotes (‘) for string constants within your event code. For example;
onClick=”document.write(‘welcome’);”
similarly, if you give the attribute value enclosed in single quotes (‘) then you must use the double quotes. For example;
onClick=’document.write(“welcome”);’
Example write a JavaScript code which demonstrates how event handling works:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <script type="text/JavaScript"> function sum(x,y) { s=x+y; document.write("Sum of "+x+" and "+y+" = "+s); } </script> </head> <body> <form> <input type="button" value="First button" onClick='alert("First button is clicked");'> <input type="button" value="Second button" onClick="sum(25,33);"> </form> </body> </html> |
When you click the first button, the following message will be appear:
And when you click the second button, the following output will be appear:
Link Events Handling:
There are nine events that are associated with the links. A brief description of these events is as follows:
| Event | Event Handling Attribute | Description |
| Click | OnClick | This link event occurred when a user clicks the link. |
| DblClick | OnDblClick | This link event occurred when a user double clicks the link. |
| MouseDown | OnMouseDown | This link event occurred when a user presses the mouse button over the link. |
| MouseUp | OnMouseUp | This link event occurred when a user releases the pressed mouse button. |
| MouseOver | OnMouseOver | This link event is occurred when the user moves the mouse pointer over a link. |
| MouseOut | OnMouseOut | This link event is occurred when the user moves he mouse pointer from within a link to outside of that link. |
| KeyDown | OnKeyDown | This event is occurred when the user pressed a key on the keyboard. |
| KeyUp | OnKeyUp | This event handling is occurred when the user release the pressed key of the keyboard. |
| KeyPress | OnKeyPress | This event handling is occurred when the user presses a key or when the user keeps a key pressed down. |
Example write Javascript code to demonstrate the commonly used events of hyperlink tag <A>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <script type="text/JavaScript"> function test(x) { alert(x); } </script> </head> <body> <h1> Testing Link Event Handling </h1> <a href="https//:www.programmingdigest.com" onClick='test("you have clicked the link");' onDblClick='test("you have double clicked the link");' OnMouseOut='test("you have moved outside the link");' OnKeyDown='test("you have pressed down the key");'> Programming Digest</a> </body> </html> When you click on the link the following alert message will be displayed |
When you move mouse from the link the following alert message will be displayed
When you pressed any key in keyboard, the following alert message will be displayed
In the above code, only a single function is used. This function s called with all given event attributes with different parameters values. In the body of function, the parameter value is displayed using “alert()” dialog box.
Image Event Handling:
Various events are also associated with image element of html. usually, image events handling are used to monitor the progress of image loading. The images take more time to load than normal text. In many web application, it is important to know whether a specific image has been loaded, or in the process of loading or loading process is interrupted. The image event handling provide this capability. The most important image event are described as follows:
| Event | Event Handling Attribute | Description |
| Load | OnLoad | This event handling is occurred when an image is loaded and displayed into the browser window. |
| Error | OnError | This image event is occurred when an error occurs during the loading process of an image. |
| Abort | OnAbort | This image event is occurred when the user interrupt or cancels loading of an image. |
| KeyDown | OnKeyDown | This image event is occurred when the user presses down key of the keyboard. The image must be focused. |
| KeyUp` | OnKeyUp | This event is occurred when the user releases the pressed key of the keyboard. |
| KeyPress | OnKeyPress | This event is occurred when the user presses a key or when the user keeps a key pressed down. |
Example write JavaScript code to demonstrate the common user event handling of image tag <img>:
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <h1> Testing Image Event Handling </h1> <img src="test.jpg" alt="test" onLoad='alert("image is successfully loaded");' onError='alert("Error in loading image");'></img> </body> </html> |
When image found in folder then it will show the following output
And when the image not found in folder then it will show the following output
Form Event handling:
In most Javascript application, the event handling is associated with form and its elements. A form provide different GUI (Graphical User Interface) objects or elements that are used to send and receive information to and from the web server. These objects include buttons, textboxes, checkboxes, radio button etc. each object is associated with a number of event . The most important event of form and its elements are described as follows:
The important events that are associated with the form are as follows:
| Event | Event Handling Attribute | Description |
| Submit | OnSubmit | This event handling is occurred when the form is submitted by the user. It means that this event occurs when user clicks the submit button in order to submit the form data to the form processor. |
| Reset | OnReset | This event handling is occurred when the user clicks the reset button of form. |
Example how to use submit and reset event handling in form:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> </head> <body> <h1> Testing Form Event Handling </h1> <form onSubmit='alert("You are submitting data");' onReset='alert("you are resetting data of the text boxes");'> Enter your name: <input type="text" size=20> <br> Enter your cell#: <input type="text" size=10> <br> <input type ="submit" value="submit data"> <input type ="reset" value="reset data"> </form> </body> </html> |
Event Handling For Text Field:
The important event handling that are associated with text field (textbox) of form are as follows:
| Event | Event Handling Attribute | Description |
| Focus | OnFocus | This event handling is occurred when text field receives the focus. |
| Blur | OnBlur | This event handling is occurred when user loses the focus from the text field. |
| Select | Onselect | This event handling is occurred when a user selects text within a text field. |
Example Write JavaScript code to demonstrate the important event handling OnFocus, OnBlur, OnSelect of text field:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <h1> Testing Text Field Event Handling </h1> <form> First Textbox: <input type="text" name="txt1" size=50><br> Second Textbox: <input type="text" name="txt2" size=40 onFocus='txt1.value="2nd textbox is focused";' onBlur='txt1.value="2nd textbox is not focused";' Onselect='txt1.value="text from second textbox has been selected";'><br> </form> </body> </html> |
When you click on second textbox a message will show in first textbox as you can seen below
And when you click on first textbox a message will show in first textbox as you can seen below
And when you select text form second textbox a message will show in first textbox as you can seen below
Password Field Event Handling:
The important event handling that are associated with password field of form are as follows:
| Event | Event Handling Attribute | Description |
| Focus | OnFocus | This event handling is occurred when the password field receives the focus. |
| Blur | OnBlur | This Event handling is occurred when user loses the focus from the password field. |
Example Write Javascript code which convert password character into text using events handling OnFocus, OnBlur of password field:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <h1> Testing Password Field Event Handling </h1> <form> password to text: <input type="text" name="txt1" size=50><br> enter password: <input type="password" name="pas" size=40 onFocus='txt1.value="password field is focused";' OnBlur='txt1.value=pas.value;'><br> </form> </body> </html> |
When you click on password field the focused message will displayed in password to text field
And when you put some text in password field it can convert password character into text and show in password to text field as you can see below.
Event Handling For Button:
The important event handling that are associated with button element of form are as follows:
| Event | Event Handling Attribute | Description |
| Click | OnClick | This event is occurred when button is clicked. |
| Focus | OnFocus | This event is occurred when the button receives the focus. |
| Blur | OnBlur | This event handling is occurred when user loses the focus from the button. |
| MouseDown | OnMouseDown | This event is occurred when the user presses the left mouse button over a button. |
| MouseUp | OnMouseUp | This event handling is occurred when the user releases the pressed left button |
Example Write JavaScript code to perform different arithmetic operations on two numbers:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <script type="text/javascript"> function add() { frm.txt3.value=parseFloat(frm.txt1.value)+parseFloat(frm.txt2.value); frm.b1.value="Result " + frm.b2.value; } function sub() { frm.txt3.value=parseFloat(frm.txt1.value)- parseFloat(frm.txt2.value); frm.b1.value="Result " + frm.b3.value; } function mul() { frm.txt3.value=parseFloat(frm.txt1.value) * parseFloat(frm.txt2.value); frm.b1.value="Result " + frm.b4.value; } function div() { frm.txt3.value=parseFloat(frm.txt1.value) / parseFloat(frm.txt2.value); frm.b1.value="Result " + frm.b5.value; } </script> </head> <body> <h1> Testing Button Event Handling </h1> <form name="frm"> Enter first number:<input type= "text" name="txt1" size=20> <br> Enter second number:<input type= "text" name="txt2" size=20> <br> <input type="button" name="b1" value="Result"> <input type="text" name="txt3" size=20><br><br> <input type="button" name="b2" value ="Addition" onClick="add();"> <input type="button" name="b3" value ="Subtraction" onClick="sub();"> <input type="button" name="b4" value ="Multiplication" onClick="mul();"> <input type="button" name="b5" value ="Division" onClick="div();"> </form> </body> </html> |
Radio button & Check Box Event Handling:
The important event handling are associated with radio button and checkbox of form are as follows:
| Event | Event Handling Attribute | Description |
| Click | OnClick | This event handling is occurred when radio button or checkbox is clicked. |
| Focus | OnFocus | This event handling is occurred when radio button or checkbox receives the focus. |
| Blur | OnBlur | This event handling is occurred when user loses the focusform the radio button or checkbox. |
Example write JavaScript code to perform different arithmetic operations on two number using radio and checkbox:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <script type="text/javascript"> function add() { frm.txt3.value=parseFloat(frm.txt1.value)+parseFloat(frm.txt2.value); frm.b1.value="Result " + frm.b2.value; } function sub() { frm.txt3.value=parseFloat(frm.txt1.value)- parseFloat(frm.txt2.value); frm.b1.value="Result " + frm.b3.value; } </script> </head> <body> <h1> Testing Radio and check box Event Handling </h1> <form name="frm"> Enter first number:<input type= "text" name="txt1" size=20> <br> Enter second number:<input type= "text" name="txt2" size=20> <br> <input type="text" name="txt3" size=20><br><br> <input type="radio" name="rl" onClick="add();">Addition <input type="checkbox" name="r2" onClick="sub();">Subtraction </form> </body> </html> |
Submit & Reset Button Event Handling:
The important events that are associated with the submit and reset button of form are as follows:
| Event | Event Handling Attribute | Description |
| Click | OnClick | This event handling is occurred when submit or reset button is clicked. |
| Focus | OnFocus | This event handling is occurred when the submit or reset button receives the focus. |
| Blur | OnBlur | This event handling is occurred when user loses the focus from the submit or reset button |
Example write Javascript code to display two button submit and reset and two textbox when one of the button is clicked, an alert message box should display. Also display messages about the status of buttons into textboxes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> </head> <body> <h1> Testing Submit and Reset Event Handling </h1> <form> Status of Submit button:<input type="text" name="txt1" size=20><br> Status of Reset button:<input type="text" name="txt2" size=20><br> <input type="submit" value="Submit Data" onClick='alert("Submit button is clicked");' onFocus='txt1.value="focused";' onBlur='txt1.value="Not focused";'> <input type="submit" value="Reset Data" onClick='alert("Reset button is clicked");' onFocus='txt2.value="focused";' onBlur='txt2.value="Not focused";'> </form> </body> </html> |
Event Handling For TextArea:
The important event handling that are associated with text area of form are as follows:
| Event | Event Handling Attribute | Description |
| Focus | OnFocus | This event handling is occurred when the text area receives the focus. |
| Blur | OnBlur | This event is occurred when user loses the focus from the textarea. |
| Change | OnChange | This event is occurred when a user change the contents of textarea. |
| Select | OnSelect | This event is occurred when a user select text within a textarea. |
| KeyDown | OnKeyDown | This event is occurred when the user presses down key of the keyboard. The textarea must be focused. |
| KeyUp | OnKeyUp | This event is occurred when the user releases the pressed key of the Keyboard. |
| KeyPress | OnKeyPress | This event is occurred when the user presses a key or when the user keeps a key pressed down. |
Event Handling For FileUpload Field:
The important event handling that are associated with fileupload field of form are as follows:
| Event | Event Handling Attribute | Description |
| Focus | OnFocus | This event handling is occurred when the FileUpload field receives the focus. |
| Blur | OnBlur | This event handling is occurred when user loses the focus from the fileUpload field. |
| Change | OnChange | This event occurs when the contents of the fileupload field changes. |
Event Handling For Window, Frameset And Frame:
The important event handling that are associated with Window, FrameSet and Frame are as follows:
| Event | Event Handling Attribute | Description |
| Blur | OnBlur | This event is occurred when a window (or Frameset or Frame) loses the focus. |
| Error | OnError | This event is occurred when n error occurs while loading the window. |
| Load | OnLoad | This event is occurred when loading process of window is completed. |
| Unload | OnUnload | This event is occurred when a user closes a window. |
| Move | OnMove | This event occurs when a user movies the window on the screen. |
| Resize | OnResize | This event is occurred when a user (or script program) changes the size of window. |
| Drag Drop | OnDragDrop | This event occurs when a user drops an object on the window. |
