Handling Events
Events
Often, Javascript statements create or manipulate graphical user interface elements such as forms or windows.
Event Handler
Javascript programs are typically event-driven. Events are actions that occur on the web page, usually as a result of something the user does, although not always. For example, a button click is an event , as is giving focus to a form element; resizing the page is an event, as is submitting a form. It is these events, which cause Javascript programs to spring into actrion. For example, if you move your mouse over this phrase, a message will pop-up , courtesy of javascript.
An event , then , is the action which triggers an event handler. The event handler specifies which Javascript code to execute. Often, event handlers are placed within the HTML tag which creates the object on which the event acts:
<tag attribute1 attribute2 onEventName="javascript code;">
For example , a hyperlink is subject to a MouseOver event, meaning that its event handler will be triggered when the mouse passes over the link . Therefore , you place the event handler for a hyperlink's MouseOver inside the A tag:
<a href=" " onMouseOver="popupFun();">
The Javascript which is called by the event handler may be any valid javascript code: a single statement or a series of statements, although most often it is a function call. The set of all events which may occur, and the particular page elements on which they can occur, is part of the Document Object Model(DOM), and not Javascript itself. As a result, Netscape and Microsoft do not share the exact same set of events, nor are all page elements subject to the same events between browsers.
The table below illustrates some of the most commonly used events supported in both DOM's. Because the DOM's differ in their event support, the following documents are recommended as an overview of each browser's event support:
Common Events
Form Object
One of the principal uses of javascript is providing a means to interact with the user on the client side. Most of the time, this interaction with the user happens through an HTML form. As a result, the javascript form object is an important object within the Javascript object model. When you work with the form object, you do not do that much with a form object in and of itself. Rather , the form object provides a container by which you can retrieve data from the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<form name="form1" action="https://www.cybersoftsystems.net/cgi-bin/guest.p1" METHOD=POST onsubmit="alert('Data Submitted')">
<input type="text" Name=t1 Size=20>
<input type=text name=t2 size=20>
<br/>
<input type=submit>
</form>
</body>
</html>
Output
As soon as the data is submitted the onSubmit() event of the form is fired.
To define a form, follow standard HTML conversion:
<form name="form1" Action="http://www.acadians.com/js/script.jfm" METHOD=GET>
<!-- Enter form objects here🡪
</form>
No comments:
Post a Comment