| 1 | <html> |
|---|
| 2 | |
|---|
| 3 | <head> |
|---|
| 4 | <title>focus capture example</title> |
|---|
| 5 | <script type="text/javascript"> |
|---|
| 6 | function log(message){ |
|---|
| 7 | var log = document.getElementById("log"); |
|---|
| 8 | log.appendChild(document.createTextNode(message)); |
|---|
| 9 | log.appendChild(document.createElement("br")); |
|---|
| 10 | } |
|---|
| 11 | function handleFocus(){ |
|---|
| 12 | log("focus " + this.id); |
|---|
| 13 | } |
|---|
| 14 | function handleBlur(){ |
|---|
| 15 | log("blur " + this.id); |
|---|
| 16 | } |
|---|
| 17 | function setup(){ |
|---|
| 18 | var itemIds = ["c1i1", "c1i2", "c2i1", "c2i2"]; |
|---|
| 19 | for(var i=0; i<itemIds.length; i++){ |
|---|
| 20 | var elem = document.getElementById(itemIds[i]); |
|---|
| 21 | elem.tabIndex = 0; |
|---|
| 22 | // elem.addEventListener("focus", handleFocus, false); |
|---|
| 23 | // elem.addEventListener("blur", handleBlur, false); |
|---|
| 24 | } |
|---|
| 25 | var containerIds = ["c1", "c2"]; |
|---|
| 26 | for(var i=0; i<containerIds.length; i++){ |
|---|
| 27 | var elem = document.getElementById(containerIds[i]); |
|---|
| 28 | elem.addEventListener("focus", handleFocus, true); |
|---|
| 29 | elem.addEventListener("blur", handleBlur, true); |
|---|
| 30 | // elem.addEventListener("focus", handleFocus, false); |
|---|
| 31 | // elem.addEventListener("blur", handleBlur, false); |
|---|
| 32 | } |
|---|
| 33 | } |
|---|
| 34 | </script> |
|---|
| 35 | </head> |
|---|
| 36 | |
|---|
| 37 | <body onload="setup()"> |
|---|
| 38 | |
|---|
| 39 | <div id="c1"> |
|---|
| 40 | <div id="c1i1">c1i1</div> |
|---|
| 41 | <div id="c1i2">c1i2</div> |
|---|
| 42 | </div> |
|---|
| 43 | |
|---|
| 44 | <hr> |
|---|
| 45 | |
|---|
| 46 | <div id="c2"> |
|---|
| 47 | <div id="c2i1">c2i1</div> |
|---|
| 48 | <div id="c2i2">c2i2</div> |
|---|
| 49 | </div> |
|---|
| 50 | |
|---|
| 51 | <hr> |
|---|
| 52 | |
|---|
| 53 | <div id="log"></div> |
|---|
| 54 | |
|---|
| 55 | </body> |
|---|
| 56 | |
|---|
| 57 | </html> |
|---|
