dispatchEvent.click.checkbox.html (3237B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title id='desc'> MouseEvent: Default action and synthetic click event </title> 5 <script type="text/javascript"> 6 var PassTest = function() 7 { 8 document.getElementById("testresult").firstChild.data = "PASS"; 9 } 10 11 var FailTest = function() 12 { 13 document.getElementById("testresult").firstChild.data = "FAIL"; 14 } 15 16 var EVENT = "click"; 17 var TARGET; 18 var HELPER; 19 20 function TestEvent(evt) 21 { 22 if (HELPER == evt.target) 23 { 24 HELPER.removeEventListener(EVENT, TestEvent, true); 25 var e = document.createEvent("MouseEvent"); 26 e.initMouseEvent(EVENT, /* type */ 27 false, /* bubbles */ 28 true, /* cancelable */ 29 window, /* view */ 30 1, /* detail */ 31 0, /* screenX */ 32 0, /* screenY */ 33 0, /* clientX */ 34 0, /* clientY */ 35 false, /* ctrlKey */ 36 false, /* altKey */ 37 false, /* shiftKey */ 38 false, /* metaKey */ 39 0, /* button */ 40 null /* relatedTarget */ ); 41 42 TARGET.dispatchEvent(e); 43 } 44 else if (TARGET == evt.target) 45 { 46 if ((true == TARGET.checked) && (false == evt.bubbles)) 47 { 48 PassTest(); 49 } 50 else 51 { 52 FailTest(); 53 } 54 } 55 } 56 57 window.onload = function() 58 { 59 try 60 { 61 TARGET = document.getElementById("target"); 62 HELPER = document.getElementById("helper"); 63 TARGET.addEventListener(EVENT, TestEvent, true); 64 HELPER.addEventListener(EVENT, TestEvent, true); 65 } 66 catch(ex) 67 { 68 FailTest(); 69 } 70 } 71 </script> 72 </head> 73 <body> 74 <h3>DOM Events</h3> 75 <h4> 76 Test Description: MouseEvent: Default action is performed when a synthetic click event is dispatched on a checkbox element 77 </h4> 78 79 <input type="checkbox" id="target"> 80 <button id="helper">Click Here</button> 81 82 <p id="manualsteps"> 83 Steps: 84 <ol> 85 <li> Click the button "Click Here" 86 </ol> 87 </p> 88 89 <p>Test passes if the word "PASS" appears below after following the above steps.</p> 90 <div>Test result: </div> 91 <div id='testresult'>FAIL</div> 92 </body> 93 </html>