A JavaScript event is an item that occurs based on an action. As you might recall from previous lessons, JavaScript is used to add dynamic features on static HTML web pages because it is capable of detecting events when they occur.
There are numerous events that can be triggered on a web page because literally, every element placed on a web page can trigger an event. For example, you can click a button; type information in a text box; move your mouse cursor; right-click on the mouse, etc. These are all types of events which can occur on a web page. The main benefit of having events is to allow the web page to be dynamic and “respond” to the user’s actions.
EVENT HANDLING
Event handling is a very useful and powerful feature of the JavaScript language. An event handler is a JavaScript code that is inserted in the HTML tags (instead of the JavaScript tags), and executes JavaScript commands when an event is triggered.
Without proper event handling, the web page will not be able to respond to the user’s actions. Therefore, to capture a particular event, you need to include the correct event handler into the code otherwise the web page would not react to that event. For example, if the web page contains a button and you want something to happen when the user clicks on that button, you will need to include the event handler “onClick” to your HTML code, as shown below. Failure to do so will result in a static button which doesn’t trigger any action when the user clicks on it.
Some of the most important and commonly used JavaScript event handlers are:
- onClick (when the user clicks on a button, link, checkbox, radio button, etc.);
- onKeyPress (when the user presses or holds down a key on an image, TextArea, link, etc.);
- onKeyUp (when the user releases a key on an image, TextArea, link, etc.);
- onKeyDown (when the user presses a key on an image, TextArea, link, etc.);
- onLoad (used for an image or a window, when the whole page has finished loading);
- onMouseOver (when the user moves the mouse over an image or a link);
- onMouseDown (when the user clicks on the mouse button);
- onMouseUp (when the user releases a previously pressed mouse button);
- onMouseMove (when the user moves the mouse pointer);
- onMouseOut (when the mouse pointer moves away from the object);
- onAbort (when the loading of an image is aborted);
- onChange (when a user changes the value of a TextArea);
- onError (when a JavaScript error occurs);
- onReset (when the reset button of a form is clicked);
- onSelect (when the user highlights or selects text in a form);
- onSubmit (when the user clicks the submit button of a form).
The example below will show you how event handling techniques are used in web applications:
Example 1:
In this example, we will create a mouseClick() function and place it in the <head> tag of the HTML file. We will then create a textArea and a button and place them in the <body> tag. The function will be executed when the button is clicked. The event handler used is ‘onClick’ within the <input> tags for the button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Event handling</title>
<script language="JavaScript" type="text/javascript">
function mouseClick( )
{
alert("You have clicked this button!");
}
</script>
</head>
<body>
<form>
<textarea name="test" wrap="physical" cols="80" rows="10" ></textarea>
<input type="button" onClick="mouseClick()" value="Click here..." />
</form>
</body>
</html>
Other courses available include - Artificial Intelligence, C# Programming, Computer Studies, Cybersecurity, Ecommerce and more. See the link below for more information.
Other Computer Training Courses Available Here
