Handle Events

[Total: 0    Average: 0/5]

This shows how to handle events.

Body Code:

<FORM NAME="form" ACTION="javascript:void(0)">
<table name="table" border="3" cellpadding="8" cellspacing="8">
  <tr name="tr">
    <td name="td" valign="top">
      <p name="p">
	  Select the type of event to the right, and then press
	  the "SET MONITOR EVENT" link.<BR>
	  Click and hold the "shift" or "ctrl" key to select
	  multiple options.<BR>
      <a HREF="javascript:set_monitor()" name="link">SET MONITOR EVENT</a><br><br><br>
      <INPUT NAME="reset" TYPE="reset">
      </p>
   </td>
    <td name="td" valign="top">
<SELECT MULTIPLE NAME="listMonitor" align="top" size="22">
<OPTION  value="handler0 ">0 onabort</OPTION>
<OPTION  value="handler1 ">1 onchange</OPTION>
<OPTION  value="handler2 ">2 ondblclick</OPTION>
<OPTION  value="handler3 ">3 onfocus</OPTION>
<OPTION  value="handler4 ">4 onkeypress</OPTION>
<OPTION  value="handler5 ">5 onload</OPTION>
<OPTION  value="handler6 ">6 onmouseout</OPTION>
<OPTION  value="handler7 ">7 onmouseup</OPTION>
<OPTION  value="handler8 ">8 onreset</OPTION>
<OPTION  value="handler9 ">9 onselect</OPTION>
<OPTION  value="handler10 ">10 onunload</OPTION>
<OPTION  value="handler11 ">11 onblur</OPTION>
<OPTION  value="handler12 ">12 onclick</OPTION>
<OPTION  value="handler13 ">13 onerror</OPTION>
<OPTION  value="handler14 ">14 onkeydown</OPTION>
<OPTION  value="handler15 ">15 onkeyup</OPTION>
<OPTION  value="handler16 ">16 onmousedown</OPTION>
<OPTION  value="handler17 ">17 onmouseover</OPTION>
<OPTION  value="handler18 ">18 onmove</OPTION>
<OPTION  value="handler19 ">19 onresize</OPTION>
<OPTION  value="handler20 ">20 onsubmit</OPTION>
<OPTION value="handler21 ">21 onmousemove</OPTION>
</SELECT>
    </td>
  </tr>
</table>
<p name="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<nobr>
<INPUT NAME="button" TYPE=button VALUE="Button">
&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT NAME="submit" TYPE=submit>
<INPUT NAME="radio" TYPE=radio>Radio Button
&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT NAME="checkbox" TYPE=checkbox>Checkbox
</nobr>
<br><br>
<nobr>
Select - menu:<SELECT NAME="menu" align="top">
<OPTION>Option 1</OPTION>
<OPTION>Option 2</OPTION>
<OPTION>Option 3</OPTION>
</SELECT>&nbsp;&nbsp;
Select&nbsp; - list:<SELECT MULTIPLE NAME="list" align="top">
<OPTION>Option 1</OPTION>
<OPTION>Option 2</OPTION>
<OPTION>Option 3</OPTION>
</SELECT> 
</nobr>
<br><br>
<nobr>
Text:<INPUT NAME="text" TYPE=text>&nbsp;&nbsp;&nbsp;&nbsp;
Password:<INPUT NAME="password" TYPE=password>
</nobr>
<br><br>
<nobr>
File:<INPUT NAME="fileupload" TYPE=file>&nbsp;&nbsp;&nbsp;&nbsp;
Textarea:<TEXTAREA NAME="textarea" ROWS=2 COLS=20></TEXTAREA>
</nobr>
</FORM>
<p name="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<hr name="hr">
<nobr>
<p name="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Image:<IMG SRC="http://www.js-examples.com/js/pic1.gif" name="image" align="center" border="2" width="50" height="50">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Link:&nbsp;<A HREF="javascript:alert('tDEMO-LINKtt')" name="link">Test link</A>
</p>
</nobr>
<hr name="hr">

<SCRIPT>
// Figure out whether this is Navigator or IE. Assume version 4.
isNav = (navigator.appName.indexOf("Netscape") != -1);
isIE = (navigator.appName.indexOf("Microsoft") != -1);

// Create a new window for our event handler to display event details in.
ewin = window.open("", "EventTester", 
                       "width=300,height=400,scrollbars=1,resizable=1,menubar=0,status=0,top=0,left=0");

set_monitor();

function set_monitor(){
ewin.docopen = false

d = ewin.document;           // Shorthand
  if (!ewin.docopen) {       // If the document is not already open
      d.open("text/plain");  // ...open it as plain text.
      ewin.docopen = true
  }

// This general purpose event handler displays details about the event
// in the window we created above. It has vendor-dependent sections
// to deal with the differences in the Event object.  
// Because events often arrive in rapid bursts (such as key down/key up 
// pairs), this handler takes precautions to prevent these events from
// overwriting each other. It uses setTimeout() and removeTimeout() to
// arrange that the Document object not be closed until a 0.5second has passed
// without the arrival of any straggling events. Any events that arrive
// within that one-second window will be appended to the end of the document
// instead of overwriting the document.
   function handler(e) {
   d = ewin.document;           // Scorciatoia - Shorthand
     if (!ewin.docopen) {       // If the document is not already open
         d.open("text/plain");  // ...open it as plain text.
         ewin.docopen = true;
     }
 
     // If we're in Navigator, report event details in this way.
     if (isNav) {
       d.writeln("Type: " + e.type);
       if (e.target) d.writeln("Target: " + Object.prototype.toString.apply(e.target));
       if (e.target.name) d.writeln("Target name: " + e.target.name);
       if (e.x || e.y) d.writeln("X: " + e.x + " Y: " + e.y);
       if (e.which) d.writeln("which: " + e.which);
       if (e.modifiers) d.writeln("modifiers: " + e.modifiers);
     }

     // If we're in Internet Explorer, first copy the event from the 
     // global event variable, then report its details. Finally, set
     // the cancelBubble property so it doesn't bubble and get reported 
     // multiple times.
     if (isIE) {
        e = window.event;   // Grab the event.
        d.writeln("Type: " + e.type);
        if (e.srcElement && e.srcElement.name)
            d.writeln("srcElement name: " + e.srcElement.name);
        if (e.clientX || e.clientY) 
            d.writeln("X: " + e.clientX + " Y: " + e.clientY);
        if (e.button) d.writeln("mouse button: " + e.button);
        if (e.keyCode) d.writeln("keyCode: " + e.keyCode);
        if (e.altKey) d.writeln("altKey");
        if (e.ctrlKey) d.writeln("ctrlKey");
        if (e.shiftKey) d.writeln("shiftKey");

        // We've reported this event, and don't want our container to
        // report it too, so don't let it bubble up any further.
        e.cancelBubble = true;  
     }
     d.writeln();  // Put a blank line between events.

     // Arrange to close the document a 0.5second from now, resetting any timer
     // set by a previous event.
     if (ewin.timeoutid) clearTimeout(ewin.timeoutid);{
     ewin.timeoutid = setTimeout("d.close(); ewin.docopen=false;", 500);  
     }
   }//chiude handler() - end handler()

// This function registers the event handler defined above on all possible
// event handlers for the specified object.
// Get the value from form.listMonitor.options
function addhandlers(o) {
   xx=document.form.listMonitor.options;
   xx[0].selected==true ? o.onabort = handler : o.onabort = "";
   xx[1].selected==true ? o.onchange = handler : o.onchange = "";
   xx[2].selected==true ? o.ondblclick = handler : o.ondblclick = "";
   xx[3].selected==true ? o.onfocus = handler : o.onfocus = "";
   xx[4].selected==true ? o.onkeypress = handler : o.onkeypress = "";
   xx[5].selected==true ? o.onload = handler : o.onload = "";
   xx[6].selected==true ? o.onmouseout = handler : o.onmouseout = "";
   xx[7].selected==true ? o.onmouseup = handler : o.onmouseup = "";
   xx[8].selected==true ? o.onreset = handler : o.onreset = "";
   xx[9].selected==true ? o.onselect = handler : o.onselect = "";
   xx[10].selected==true ? o.onunload = handler : o.onunload = "";
   xx[11].selected==true ? o.onblur = handler : o.onblur = "";
   xx[12].selected==true ? o.onclick = handler : o.onclick = "";
   xx[13].selected==true ? o.onerror = handler : o.onerror = "";
   xx[14].selected==true ? o.onkeydown = handler : o.onkeydown = "";
   xx[15].selected==true ? o.onkeyup = handler : o.onkeyup = "";
   xx[16].selected==true ? o.onmousedown = handler : o.onmousedown = "";
   xx[17].selected==true ? o.onmouseover = handler : o.onmouseover = "";
   xx[18].selected==true ? o.onmove = handler : o.onmove = "";
   xx[19].selected==true ? o.onresize = handler : o.onresize = "";
   xx[20].selected==true ? o.onsubmit = handler : o.onsubmit = "";
   xx[21].selected==true ? o.onmousemove = handler : o.onmousemove = "";
}



// Now use addhandlers() to register all event handlers on all
// objects of interest in the document.
//addhandlers(window);
//addhandlers(document);

// Add handlers to all links.
  for(var a = 0; a < document.links.length; a++)
    addhandlers(document.links[a]);

// Add handlers to all images.
  for(var b = 0; b < document.images.length; b++)
    addhandlers(document.images[b]);

// Add handlers on all forms and all form elements.
  for(var f = 0; f < document.forms.length; f++) {
    addhandlers(document.forms[f]);
    for(var g = 0; g < document.forms[f].elements.length; g++)
        addhandlers(document.forms[f].elements[g]);
  }
  
// Add handlers to body.
 if (isIE) {
   for(var c = 0; c < document.body.all; c++){
     addhandlers(document.body[c]);  
   }
 }
}// fine set_monitor() - end set_monitor()  
</SCRIPT>
<!-- Questa versione e' stata modificata da mario.q@falco.mi.it http://web.tiscalinet.it/marioq -->
<!-- This version it's modify from mario.q@falco.mi.it http://web.tiscalinet.it/marioq -->
<!-- as long as this notice is retained.                                   -->

Times Viewed: 5

Leave a Reply

Your email address will not be published. Required fields are marked *