Advanced Search

event information

/ Published in: JavaScript
Save to your folder(s)
Source: eventinfo @ howtocreate

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. Input, textarea, select
  3. -> onclick, onkeydown, onkeyup, onkeypress, onchange, onfocus, onblur, etc.
  4. form
  5. -> onsubmit, onreset
  6. a
  7. -> onclick, onmouseover, onmouseout, onfocus, onblur
  8. body
  9. -> onload, onunload
  10. */ 
  11.  
  12. // ------------------------------
  13. //     reacting to an event
  14.  
  15. <a onmouseover="name_of_function(params)" href="somepage.html">
  16. <input onkeypress="myVariable = 2;startTest();">
  17. <select onchange="self.location.href = this.options[this.selectedIndex].value;">
  18. <body onunload="window.alert('bye')">
  19.  
  20. // ------------------------------
  21. //     Executing a function
  22.  
  23. <a href="javascript:name_of_function(params)">
  24.  
  25.  
  26. // ------------------------------
  27. //     Accommodating Netscape 4
  28.  
  29. //Only Netscape 4 and Escape 4 need this first line
  30. if( document.captureEvents && Event.KEYUP ) { document.captureEvents( Event.KEYUP ); }
  31. document.onkeyup = alertkey;
  32. //where alertKey is a function that will handle the event
  33.  
  34.  
  35. // ------------------------------
  36. //     Detecting the keyup event over the page and extracting 
  37. //     the key code.
  38.  
  39. /*
  40. -> iCab only passes key code information in input boxes.
  41. -> Blazer (a version of NetFront) detects limited key events (due to the keyboard handling on the device) and returns nonsense key codes (such as -1987304).
  42. -> WebTV and Escape 4 can only detect key events on text boxes, and may be a little unreliable.
  43. -> OmniWeb 4.2- and Opera 5 for Mac do not pass key code information.
  44. -> Netscape 4 on Linux does not detect any key events properly.
  45. -> Clue browser cannot detect key events.
  46. I am unsure of the capabilities of NetBox, iPanel MicroBrowser and OpenTV here.
  47.  
  48. */
  49.  
  50. // first, tell the browsers to react to the event
  51. if( document.captureEvents && Event.KEYUP ) {
  52.   //remove this part if you do not need Netscape 4 to work
  53.   document.captureEvents( Event.KEYUP );
  54. }
  55. /* this next line tells the browser to detect a keyup
  56. event over the whole document and when it detects it,
  57. it should run the event handler function 'alertkey' */
  58. document.onkeyup = alertkey;
  59.  
  60. //now create the event handler function to process the event
  61. function alertkey(e) {
  62.   if( !e ) {
  63.     //if the browser did not pass the event information to the
  64.     //function, we will have to obtain it from the event register
  65.     if( window.event ) {
  66.       //Internet Explorer
  67.       e = window.event;
  68.     } else {
  69.       //total failure, we have no way of referencing the event
  70.       return;
  71.     }
  72.   }
  73.   if( typeof( e.keyCode ) == 'number'  ) {
  74.     //DOM
  75.     e = e.keyCode;
  76.   } else if( typeof( e.which ) == 'number' ) {
  77.     //NS 4 compatible
  78.     e = e.which;
  79.   } else if( typeof( e.charCode ) == 'number'  ) {
  80.     //also NS 6+, Mozilla 0.9+
  81.     e = e.charCode;
  82.   } else {
  83.     //total failure, we have no way of obtaining the key code
  84.     return;
  85.   }
  86.   window.alert('The key pressed has keycode ' + e +
  87.     ' and is key ' + String.fromCharCode( e ) );
  88. }
  89.  
  90.  
  91.  
  92. // ------------------------------
  93. //     Detecting the mouse coordinates when it moves 
  94. //     over a positioned element </h3>
  95.  
  96. if( myReference.captureEvents && Event.MOUSEMOVE ) {
  97.   //remove this part if you do not need Netscape 4 to work
  98.   myReference.captureEvents( Event.MOUSEMOVE );
  99. }
  100. myReference.onmousemove = alertCoord;
  101.  
  102. function alertCoord(e) {
  103.   if( !e ) {
  104.     if( window.event ) {
  105.       //Internet Explorer
  106.       e = window.event;
  107.     } else {
  108.       //total failure, we have no way of referencing the event
  109.       return;
  110.     }
  111.   }
  112.   if( typeof( e.pageX ) == 'number' ) {
  113.     //most browsers
  114.     var xcoord = e.pageX;
  115.     var ycoord = e.pageY;
  116.   } else if( typeof( e.clientX ) == 'number' ) {
  117.     //Internet Explorer and older browsers
  118.     //other browsers provide this, but follow the pageX/Y branch
  119.     var xcoord = e.clientX;
  120.     var ycoord = e.clientY;
  121.     var badOldBrowser = ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) ||
  122.      ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) ||
  123.      ( navigator.vendor == 'KDE' )
  124.     if( !badOldBrowser ) {
  125.       if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
  126.         //IE 4, 5 & 6 (in non-standards compliant mode)
  127.         xcoord += document.body.scrollLeft;
  128.         ycoord += document.body.scrollTop;
  129.       } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
  130.         //IE 6 (in standards compliant mode)
  131.         xcoord += document.documentElement.scrollLeft;
  132.         ycoord += document.documentElement.scrollTop;
  133.       }
  134.     }
  135.   } else {
  136.     //total failure, we have no way of obtaining the mouse coordinates
  137.     return;
  138.   }
  139.   window.alert('Mouse coordinates are ('+xcoord+','+ycoord+')');
  140. }

URL: http://www.howtocreate.co.uk/tutorials/javascript/eventinfo

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.