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

Event Handling

What Is An Event?

JavaScript Event Handling- An instance that happens by the interaction of the user (or operating system or application program) and computer can detect it and give a response to it is called an event. For example, when the user clicks on any icon or button of the program, the program gives the response by executing the command. The clicking of the mouse is 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.
  • the 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 the process of page completes etc.

JavaScript Event Handling and Event handler:

The browser waits for events to occur. When an event occurs, the browser performs processing, which is related to that event. The processing that is performed in response to the occurrence of an event is known as event handling. The code that performs this processing called an event handler. It can be said that an event handler is a piece of code that is executed when an event occurs. Event handlers 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 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 an 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 the event handling attribute. All event handling 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 event occurs. It is placed between the quotes.

In general, you can insert multiple javascript statements for the value of an event handling attributes. In this case, multiple Javascript statements must be separated by semicolons (;). Usually, a single function call statement is given as the 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 the 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 handling 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 JavaScript event handling works:

Event Handling

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

Event Handling

And when you click the second button, the following output will 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 handling occurred when a user releases the pressed mouse button.
MouseOver OnMouseOver This link event handling has occurred when the user moves the mouse pointer over a link.
MouseOut OnMouseOut This link event has occurred when the user moves the mouse pointer from within a link to outside of that link.
KeyDown OnKeyDown This event handling is occurred when the user pressed a key on the keyboard.
KeyUp OnKeyUp This event has occurred when the user release 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 commonly used events of hyperlink tag <A>:

When you click on the link the following alert message will be displayed

Event Handling

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

Event Handling

When you pressed any key in the 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 parameter values. In the body of the function, the parameter value is displayed using an “alert()” dialog box.


Image Event Handling:

Various events are also associated with image elements 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 applications, 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 provides this capability. The most important image event handling is described as follows:

Event Event Handling Attribute Description
Load OnLoad This event has occurred when an image is loaded and displayed into the browser window.
Error OnError This image event has occurred when an error occurs during the loading process of an image.
Abort OnAbort This image event has occurred when the user interrupts or cancels the loading of an image.
KeyDown OnKeyDown This image event has occurred when the user presses down key of the keyboard. The image must be focused on.
KeyUp` OnKeyUp This event has occurred when the user releases the pressed key of the keyboard.
KeyPress OnKeyPress This event has 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>:

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 webserver. These objects include buttons, text boxes, checkboxes, radio button etc. each object is associated with a number of event handling. The most important event handling of form and its elements are described as follows:

Events handling for form:

The important events that are associated with the form are as follows:

Event Event Handling Attribute Description
Submit OnSubmit This event has occurred when the form is submitted by the user. It means that this event occurs when the user clicks the submit button in order to submit the form data to the form processor.
Reset OnReset This event has occurred when the user clicks the reset button of the form.

Example how to use submit and reset event handling in the form:

Event Handling

Event Handling


Event Handling For Text Field:

The important event handling that is associated with the text field (textbox) of form are as follows:

Event Event Handling Attribute Description
Focus OnFocus This event has occurred when the text field receives the focus.
Blur OnBlur This event has occurred when the user loses the focus from the text field.
Select Onselect This event has occurred when a user selects text within a text field.

Example Write JavaScript code to demonstrate the important event handling OnFocus, OnBlur, OnSelect of the text field:

When you click on the second textbox a message will show in the first textbox as you can see below

Event Handling

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

Event Handling

And when you select text form second textbox a message will show in the first textbox as you can see 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 has occurred when the password field receives the focus.
Blur OnBlur This Event has occurred when the 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:

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 has occurred when the button is clicked.
Focus OnFocus This event has occurred when the button receives the focus.
Blur OnBlur This event has occurred when the user loses the focus from the button.
MouseDown OnMouseDown This event has occurred when the user presses the left mouse button over a button.
MouseUp OnMouseUp This event has occurred when the user releases the pressed left button

Example Write JavaScript code to perform different arithmetic operations on two numbers:

Event Handling

Event Handling

Event Handling

Event Handling


Radio button & CheckBox Event Handling:

The important event handling is associated with radio button and checkbox of form are as follows:

Event Event Handling Attribute Description
Click OnClick This event has occurred when radio button or checkbox is clicked.
Focus OnFocus This event has occurred when the radio button or checkbox receives the focus.
Blur OnBlur This event has occurred when user loses the focus from the radio button or checkbox.

Example write JavaScript code to perform different arithmetic operations on two number using radio and checkbox:

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 has occurred when the submit or reset button is clicked.
Focus OnFocus This event has occurred when the submit or reset button receives the focus.
Blur OnBlur This event has occurred when the user loses the focus from the submit or reset button

Example write Javascript code to display two-button submit and reset and two textboxes when one of the buttons is clicked, an alert message box should display. Also, display messages about the status of buttons into textboxes:

Event Handling

Event Handling

Event Handling

Event Handling

Event Handling For TextArea:

The important events that are associated with a text area of form are as follows:

Event Event Handling Attribute Description
Focus OnFocus This event has occurred when the text area receives the focus.
Blur OnBlur This event has occurred when the user loses focus from the text area.
Change OnChange This event has occurred when a user changes the contents of textarea.
Select OnSelect This event has occurred when a user selects text within a text area.
KeyDown OnKeyDown This event has occurred when the user presses down key of the keyboard. The textarea must be focused.
KeyUp OnKeyUp This event has occurred when the user releases the pressed key of the Keyboard.
KeyPress OnKeyPress This event has occurred when the user presses a key or when the user keeps a key pressed down.



Event Handling For FileUpload Field:

The important events that are associated with the file upload field of form are as follows:

Event Event Handling Attribute Description
Focus OnFocus This event has occurred when the FileUpload field receives the focus.
Blur OnBlur This event has occurred when the user loses the focus from the fileUpload field.
Change OnChange This event has occurred when the contents of the file upload field change.

 Events For Window, Frameset, And Frame:

The important event handling that is associated with Window, FrameSet, and Frame are as follows:

Event Event Handling Attribute Description
Blur OnBlur This event has occurred when a window (or Frameset or Frame) loses the focus.
Error OnError This event has occurred when n error occurs while loading the window.
Load OnLoad This event has occurred when the loading process of the window is completed.
Unload OnUnload This event has occurred when a user closes a window.
Move OnMove This event has occurred when the user movies the window on the screen.
Resize OnResize This event has occurred when a user (or script program) changes the size of the window.
Drag Drop OnDragDrop This event has occurred when a user drops an object on the window.

Recommended For You

Fawad

About the Author: Fawad

My name is Shahzada Fawad and I am a Programmer. Currently, I am running my own YouTube channel "Expertstech", and managing this Website. My Hobbies are * Watching Movies * Music * Photography * Travelling * gaming and so on...

Leave a Reply

%d bloggers like this: