event information


/ Published in: JavaScript
Save to your folder(s)

Source: eventinfo @ howtocreate


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.