Prototype - Event Handpng

Event management is one of the biggest challenges to achieve cross-browser scripting. Every browser has different approaches to handle key strokes.

Prototype Framework handles all cross browser compatibipty issues and keeps you free from all trouble related to event management.

Prototype Framework provides Event namespace, which is replete with methods, that all take the current event object as an argument, and happily produce the information you re requesting, across all major browsers.

Event namespace also provides a standardized pst of key codes you can use with keyboard-related events. The following constants are defined in the namespace −

S.No.	Key Constant & Description
1.	KEY_BACKSPACE Represent back space key.
2.	KEY_TAB Represent tab key.
3.	KEY_RETURN Represent return key.
4.	KEY_ESC Represent esc key.
5.	KEY_LEFT Represent left key.
6.	KEY_UP Represent up key.
7.	KEY_RIGHT Represent right key.
8.	KEY_DOWN Represent down key.
9.	KEY_DELETE Represent delete key.
10.	KEY_HOME Represent home key.
11.	KEY_END Represent end key.
12.	KEY_PAGEUP Represent page up key.
13.	KEY_PAGEDOWN Represent page down key.

How to Handle Events

Before we start, let us see an example of using an event method. This example shows how to capture the DOM element on which the event occurred.

Example

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event  cpck  and associated call back.
         Event.observe(document,  cpck , respondToCpck);
  
         // Callback function to handle the event.
         function respondToCpck(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Cpck on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <span id = "spanision">This is spansion.</span>
   </body>
</html>

Prototype - Event Handpng

How to Handle Events

Example

Output