JavaScript

Event Handling In JavaScript: Image, Form, Link, Buttons, Fileupload

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:

Top Gaming Computers

Best Laptops

Best Graphic Cards

Portable Hard Drives

Best Keyboards

Best High Quality PC Mic

Computer Accessories

*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:

<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>

Event Handling

When you click the first button, the following message will be appear:

Event Handling

And when you click the second button, the following output will be appear:

Event Handling

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>:

<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

 

Event Handling

When you move mouse from the link the following alert message will be displayed

Event Handling

When you pressed any key in keyboard, the following alert message will be displayed

Event Handling

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>:

<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

Event Handling

And when the image not found in folder then it will show the following output

Event Handling

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:

<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

Event Handling


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:

<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

Event Handling

And when you click on first textbox a message will show in first textbox as you can seen below

Event Handling

And when you select text form second textbox a message will show in first textbox as you can seen below

Event Handling

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:

<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

Event Handling

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

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:

<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>

Event Handling

Event Handling

Event Handling

Event Handling


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:

<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>

Event Handling

Event Handling

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:

<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

Event Handling

Event Handling

Event Handling

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.

 

 

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button