Difference between revisions of "Event Watcher"

From Level Access Web Labs
Jump to navigation Jump to search
Line 2: Line 2:
 
* onfocus, onblur
 
* onfocus, onblur
 
* onclick, ondbclik
 
* onclick, ondbclik
* onmouseup, onmousedown
+
* onmouseup, onmousedown, onmouseover
 
* onkeypress, onkeydown, onkeyup
 
* onkeypress, onkeydown, onkeyup
 
* touchstart, touchend
 
* touchstart, touchend
Line 31: Line 31:
 
       }
 
       }
 
       function setup() {
 
       function setup() {
   el.addEventListener("touchstart", handleStart, false);
+
var elements = ['s1','i1','b1','a1'];
   el.addEventListener("touchend", handleEnd, false);
+
var el;
   el.addEventListener("touchcancel", handleCancel, false);
+
for (var i=1; i< el.length; i++) {
   el.addEventListener("touchmove", handleMove, false);
+
  el = document.getElementById(elements[i]);
 +
   el.addEventListener("touchstart", test, false);
 +
   el.addEventListener("touchend", test, false);
 +
   el.addEventListener("touchcancel", test, false);
 +
   el.addEventListener("touchmove", test, false);
 +
  el.addEventListener("focus", test, false);
 +
  el.addEventListener("blur", test, false);
 +
  el.addEventListener("keypress", test, false);
 +
  el.addEventListener("keypup", test, false);
 +
  el.addEventListener("keydown", test, false);
 +
  el.addEventListener("mouseover", test, false);
 +
  el.addEventListener("mousedown", test, false);
 +
  el.addEventListener("mouseup", test, false);
 +
  el.addEventListener("click", test, false);
 +
  el.addEventListener("dbclick", test, false);
 +
}
 
       }
 
       }
 
     </script>
 
     </script>
 
   </head>
 
   </head>
 +
 
   <body>
 
   <body>
 
   <div id="d1">
 
   <div id="d1">
     <select title="Entry" type="text" onfocus="test(event);" onblur="test(event);" onclick="test(event);" ondbclick="test(event);" onmouseup="test(event);"  onkeypress="test(event);" onchange="test(event);">
+
     <select id="s1" title="Entry" type="text" >
 
       <option> Apple </option>
 
       <option> Apple </option>
 
       <option> Cherry</option>
 
       <option> Cherry</option>
Line 46: Line 62:
 
     </select>
 
     </select>
  
     <input title="Entry" type="text" onfocus="test(event);" onblur="test(event);" onclick="test(event);" ondbclick="test(event);" onmouseup="test(event);"  onkeypress="test(event);" onchange="test(event);"/>
+
     <input title="Entry" type="text" id="d1" />
     <button onfocus="test(event);" onblur="test(event);" onclick="test(event);" ondbclick="test(event);" onmouseup="test(event);"  onkeypress="test(event);"> Test </button>
+
   
     <a aria-label="jason" tabindex="0" href="#" id="a1" onfocus="test(event);" onblur="test(event);" onclick="test(event);" ondbclick="test(event);" onmouseup="test(event);"  onkeydown="test(event);" aria-haspopup="true" onkeypress="test(event);">op</a>
+
     <button onfocus="test(event);" id="b1"> Do nothing </button>
 +
 
 +
     <a aria-label="SSB" tabindex="0" href="http://www.ssbbartgroup.com" id="a1">SSB </a>
 
      
 
      
 
   <h3>Log area</h3>
 
   <h3>Log area</h3>

Revision as of 15:42, 26 February 2016

Move through the fields below and watch the events that are sent by the browser. For example, use with AT to find out what events are being fired.

  • onfocus, onblur
  • onclick, ondbclik
  • onmouseup, onmousedown, onmouseover
  • onkeypress, onkeydown, onkeyup
  • touchstart, touchend
  • touchmove, touchcancel

SSB

Log area