Difference between revisions of "Event Watcher"

From Level Access Web Labs
Jump to navigation Jump to search
(Use keycode package from unpkg to show keycode of key pressed.)
m
 
(6 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
   </style>
 
   </style>
  
    <script type="text/javascript" src="https://unpkg.com/keycode">
 
 
     <script type="text/javascript">
 
     <script type="text/javascript">
 
       document.ondocumentready = setTimeout(function(){setup();},1000);
 
       document.ondocumentready = setTimeout(function(){setup();},1000);
Line 24: Line 23:
 
           var c = e.keyCode ? e.keyCode : "";
 
           var c = e.keyCode ? e.keyCode : "";
 
           var d = document.createElement("div");
 
           var d = document.createElement("div");
           var t = document.createTextNode(evt.type+" " + evt.target + " " + c + " (" + keycode(c) + ")");
+
          var k = "";
 +
          if (c) {
 +
            k = "(" + keyCode(c) + ")";
 +
          }
 +
           var t = document.createTextNode(evt.type+" " + evt.target + " " + c + " " + k);
 
           d.appendChild(t);
 
           d.appendChild(t);
 
           var log1 = document.getElementById("log1");
 
           var log1 = document.getElementById("log1");
Line 89: Line 92:
 
     <div id="d3" onclick="goSomewhere();" >  
 
     <div id="d3" onclick="goSomewhere();" >  
 
     <div id="d4" >div area with no tabindex and delegate </div>
 
     <div id="d4" >div area with no tabindex and delegate </div>
     <input type="radio" id="r1">  
+
     <input type="radio" id="r1"> <span>Unlabeled radio button</span>
 
     </div>
 
     </div>
 
   <h3>Log area</h3>
 
   <h3>Log area</h3>
Line 95: Line 98:
 
       </div>
 
       </div>
 
     <button onclick="setup();"> start</button>
 
     <button onclick="setup();"> start</button>
 +
    <script type="text/javascript">
 +
        module = [];
 +
    </script>
 +
    <script type="text/javascript" src="https://unpkg.com/keycode">
 
  </body>
 
  </body>
 
</html>
 
</html>
 
[[Category:Techniques]]
 
[[Category:Techniques]]

Latest revision as of 17:49, 28 September 2021

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

Event types and their target object will be displayed in the section below. Raw event objects will also be logged to the browser console, and may be reviewed with the developer tools.

Level Access
div area with tabindex
div area with no tabindex
div area with no tabindex and delegate
Unlabeled radio button

Log area