Difference between revisions of "Event Watcher"
Jump to navigation
Jump to search
m |
|||
| (41 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
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. | 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 | + | * 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. | |
| − | * onkeypress, onkeydown, onkeyup | ||
| − | |||
| − | |||
<html> | <html> | ||
| Line 12: | Line 9: | ||
#a1::before { | #a1::before { | ||
content: "Our "; | content: "Our "; | ||
| + | } | ||
| + | #log1 { | ||
| + | height:15em; | ||
| + | overflow:scroll; | ||
} | } | ||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| − | document. | + | document.ondocumentready = setTimeout(function(){setup();},1000); |
| − | + | ||
function test(e) { | function test(e) { | ||
var evt = e ? e : window.event; | var evt = e ? e : window.event; | ||
| + | var c = e.keyCode ? e.keyCode : ""; | ||
var d = document.createElement("div"); | var d = document.createElement("div"); | ||
| − | var t = document.createTextNode(evt.type+" " +evt.target); | + | var k = ""; |
| + | if (c) { | ||
| + | k = "(" + keyCode(c) + ")"; | ||
| + | } | ||
| + | var t = document.createTextNode(evt.type+" " + evt.target + " " + c + " " + k); | ||
d.appendChild(t); | d.appendChild(t); | ||
| − | document.getElementById(" | + | var log1 = document.getElementById("log1"); |
| + | log1.appendChild(d); | ||
| + | log1.scrollTop = log1.scrollHeight - log1.clientHeight; | ||
| + | //Log the event to Console, so that the event object details may be inspected if desired. | ||
| + | console.log(e); | ||
} | } | ||
| Line 34: | Line 44: | ||
function setup() { | function setup() { | ||
| − | var elements = ['s1','i1','b1','a1']; | + | var elements = ['s1','i1','b1','a1','d1','d2','d3','d4','r1','c1']; |
var el; | var el; | ||
for (var i=0; i< elements.length; i++) { | for (var i=0; i< elements.length; i++) { | ||
| − | |||
| − | |||
el = document.getElementById(elements[i]); | el = document.getElementById(elements[i]); | ||
el.addEventListener("touchstart", test, false); | el.addEventListener("touchstart", test, false); | ||
el.addEventListener("touchend", test, false); | el.addEventListener("touchend", test, false); | ||
el.addEventListener("touchcancel", test, false); | el.addEventListener("touchcancel", test, false); | ||
| + | el.addEventListener("touchenter", test, false); | ||
| + | el.addEventListener("touchleave", test, false); | ||
el.addEventListener("touchmove", test, false); | el.addEventListener("touchmove", test, false); | ||
el.addEventListener("focus", test, false); | el.addEventListener("focus", test, false); | ||
el.addEventListener("blur", test, false); | el.addEventListener("blur", test, false); | ||
el.addEventListener("keypress", test, false); | el.addEventListener("keypress", test, false); | ||
| − | el.addEventListener(" | + | el.addEventListener("keyup", test, false); |
el.addEventListener("keydown", test, false); | el.addEventListener("keydown", test, false); | ||
el.addEventListener("mouseover", test, false); | el.addEventListener("mouseover", test, false); | ||
el.addEventListener("mousedown", test, false); | el.addEventListener("mousedown", test, false); | ||
el.addEventListener("mouseup", test, false); | el.addEventListener("mouseup", test, false); | ||
| + | el.addEventListener("mouseout", test, false); | ||
el.addEventListener("click", test, false); | el.addEventListener("click", test, false); | ||
el.addEventListener("dbclick", test, false); | el.addEventListener("dbclick", test, false); | ||
} | } | ||
} | } | ||
| + | function goSomewhere() { | ||
| + | |||
| + | } | ||
</script> | </script> | ||
</head> | </head> | ||
| Line 72: | Line 86: | ||
<button onfocus="test(event);" id="b1"> Do nothing </button> | <button onfocus="test(event);" id="b1"> Do nothing </button> | ||
| − | <a aria-label=" | + | <a aria-label="Level Access" tabindex="0" href="#a1" id="a1">Level Access</a> |
| − | + | <label><input type="checkbox" id="c1" >Order now!</label> | |
| + | <div id="d1" tabindex="0" onclick="goSomewhere();" > div area with tabindex </div> | ||
| + | <div id="d2" onclick="goSomewhere();" > div area with no tabindex </div> | ||
| + | <div id="d3" onclick="goSomewhere();" > | ||
| + | <div id="d4" >div area with no tabindex and delegate </div> | ||
| + | <input type="radio" id="r1"> <span>Unlabeled radio button</span> | ||
| + | </div> | ||
<h3>Log area</h3> | <h3>Log area</h3> | ||
| − | <div id=" | + | <div id="log1" aria-live="polite" > |
| − | + | </div> | |
| − | </ | + | <button onclick="setup();"> start</button> |
| − | + | <script type="text/javascript"> | |
| − | + | module = []; | |
| + | </script> | ||
| + | <script type="text/javascript" src="https://unpkg.com/keycode"> | ||
| + | </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