Introduction
This chapter demonstrates about the Prototype.js Events Event management is one of the really sore spots of cross-browser scripting every browser has different key strokes and following are the concepts are covered in this chapter.
- Events
- Event Methods
Description
Prototype Framework handles all issues like cross browser compatibility issues and which keeps user free from all inconvenience identified with event management. Prototype Framework gives Event namespace, which is loaded with techniques, that all take the present current event object as an argument, and hapily create the data you're requesting for, over every major browsers.
Prototype smooths it over so well user will overlook these inconveniences even exist. Enter the Event namespace. It is loaded with techniques which standardize the data reported by event across browsers. Following are the some constants are tabulated.
User can handle the methods by using the event methods. The code below demonstrates to display the DOM elements if the event occur as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
Event.observe(document, 'click', respondToClick);
function respondToClick(event) {
var element = event.element();
alert("Tag Name : " + element.tagName );
}
</script>
</head>
<body>
<p id = "note"> Click on any part to see the result.</p>
<p id = "para">This is splessons</p>
<div id = "division">This is tutorial.</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Key Constants | Description |
|---|---|
| KEY_HOME | Is used to represent the Home Key. |
| KEY_ESC | Is used to represent the esc key. |
| KEY_RIGHT | Is used to represent the right key. |
| KEY_LEFT | Is used to represent the left key. |
| KEY_UP | Is used to represent the up key. |
| KEY_DOWN | Is used to represent the down key. |
| KEY_END | Is used to represent the end key. |
| KEY_DELETE | Is used to represent the delete key. |
| KEY_RETURN | Is used to represent the return key. |
Description
Prototype event has several methods these methods are supported in latest version of prototype.js i.e version 1.6 and following are some event methods are explained.
Element()
Which is used to returns the DOM element when the event get occurred The syntax of the DOM element as shown below.
[code]
Event.element();
[/code]
The code below demonstrates click anywhere on the page if user clicks directly on paragraphs then which hides them as shown below.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
Event.observe(document, 'click', respondToClick);
function respondToClick(event) {
var element = event.element();
alert("Tag Name : " + element.tagName );
if ('P' == element.tagName) {
element.hide();
}
}
</script>
</head>
<body>
<p id = "note"> Click on any part to see the result.</p>
<p id = "para">This is paragraph</p>
<div id = "division">This is divsion.</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Observe()
In order to register a function in an event handler then if user need to observe the element already exist in the DOM. The syntax of the observe() as shown below.
[code]
Event.observe(element,eventName,handler[,useCapture=false]);
[/code]
In the above syntax parameters are explained below.
The code below demonstrates to observe the click event and which takes action occurs when ever action occurs.
[html]
<html>
<head>
<title>Prototype examples</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script>
// Register event 'click' and associated call back.
Event.observe(document, 'click', respondToClick);
// Callback function to handle the event.
function respondToClick(event) {
alert("You pressed the button...." );
}
</script>
</head>
<body>
<p id = "note"> Click anywhere to see the result.</p>
<p id = "para1">This is paragraph 1</p>
<p id = "para2">This is paragraph 2</p>
<div id = "division">This is divsion.</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Element Which is the DOM element user want to observe in prototype element can be an actual DOM reference or ID string for the element.
- eventName As per the DOM level standard standardized event name supported by the browser.
- Handler Which is an handler function which can be anonymous function create on-the-fly.
- Usecapture User can request for capturing instead of bubbling.
Key Points
- Event management is difficulty for the browsers.
- Event name space have list of key codes with key-board related events.
- Latest version Prototype.js support all the Event methods.