delegatetest.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Event Delegation Tests</title>
  5. <script src="jquery.js"></script>
  6. <style>
  7. table {
  8. border-collapse: collapse;
  9. empty-cells: show;
  10. }
  11. th {
  12. text-align: left;
  13. }
  14. thead td {
  15. width: 11%;
  16. }
  17. tbody td {
  18. background: #fed;
  19. }
  20. th, td {
  21. border: 1px solid #bbb;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <h2>Delegate Tests (<span id="fileversion">x</span>)</h2>
  27. <table id="changes">
  28. <thead>
  29. <tr>
  30. <th>
  31. Controls:
  32. </th>
  33. <td id="select-one">
  34. <select>
  35. <option value='one1'>one1</option>
  36. <option value='one2'>one2</option>
  37. <option value='one3'>one3</option>
  38. </select>
  39. <select>
  40. <option value='two1'>two1</option>
  41. <option value='two2' selected="selected">two2</option>
  42. <option value='two3'>two3</option>
  43. </select>
  44. </td>
  45. <td id="select-mult">
  46. <select multiple="multiple">
  47. <option value='multi1'>multi1</option>
  48. <option value='multi2'>multi2</option>
  49. <option value='multi3'>multi3</option>
  50. </select>
  51. </td>
  52. <td id="checkbox">
  53. <input type="checkbox" name="mycheckbox" id="check1"/>
  54. <label for="check1">check1</label><br/>
  55. <input type="checkbox" name="mycheckbox" id="check2"/>
  56. <label for="check2">check2</label><br />
  57. <input type="checkbox" name="mycheckbox" id="check3" disabled="disabled"/>
  58. <label for="check3">check3</label>
  59. </td>
  60. <td id="radio">
  61. <input type="radio" name="myradio" id="radio1"/>
  62. <label for="radio1">Radio1</label><br/>
  63. <input type="radio" name="myradio" id="radio2"/>
  64. <label for="radio2">Radio2</label><br />
  65. <input type="radio" name="myradio" id="radio3" disabled="disabled"/>
  66. <label for="radio3">Radio3</label>
  67. </td>
  68. <td id="file">
  69. <input class="file_test" id="file1" type="file"/>
  70. </td>
  71. <td id="text">
  72. <input class='test' value='' id='input' size='10' />
  73. <input class='test' value='test' id='input2' size='10' readonly="readonly" />
  74. </td>
  75. <td id="textarea">
  76. <textarea rows='2'></textarea>
  77. </td>
  78. <td id="button">
  79. <button name="mybutton1" id="button1">Button</button><br />
  80. <button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
  81. <button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
  82. <button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
  83. </td>
  84. </tr>
  85. </thead>
  86. <tbody>
  87. </tbody>
  88. </table>
  89. <p>NOTE: Only IE supports propertychange, beforeactivate, beforedeactivate; buttons do not support change events.</p>
  90. <h2>Submit Tests</h2>
  91. <table>
  92. <tr>
  93. <td>
  94. Submit each:
  95. </td>
  96. <td>
  97. <form action="" id="text_submit">
  98. <input class='test' type='text' value='Key Return To Submit'/>
  99. </form>
  100. </td>
  101. <td>
  102. <form action="" id="password_submit">
  103. <input class='test' type='password' value=''/>
  104. </form>
  105. </td>
  106. <td>
  107. <form action="" id="submit_submit">
  108. <input type='submit' value="Click Me To Submit" />
  109. </form>
  110. </td>
  111. <td>$(document).bind('submit')</td>
  112. </tr>
  113. <tr>
  114. <td>Results:</td>
  115. <td id='textSubmit' class="red">TEXT</td>
  116. <td id='passwordSubmit' class="red">PASSWORD</td>
  117. <td id='submitSubmit' class="red">BUTTON</td>
  118. <td id='boundSubmit' class="red">DOCUMENT</td>
  119. </tr>
  120. </table>
  121. <form id="autosub"><input type=submit name=subme /></form>
  122. <script type='text/javascript'>
  123. $("#fileversion").text($.fn.jquery);
  124. // Try an auto-submit, it should only fire once
  125. $(function(){
  126. var triggered = false;
  127. $("#autosub input").trigger("keypress");
  128. $("body").on("submit", "#autosub", function( e ){
  129. e.preventDefault();
  130. e.stopPropagation();
  131. if ( triggered ) {
  132. alert("autosubmit FAIL");
  133. }
  134. triggered = true;
  135. });
  136. $("#autosub").submit().remove();
  137. });
  138. // Events we want to track in row-order
  139. var events = "bind-change live-change onX-change bind-propertychange live-beforeactivate live-focusin bind-focus live-beforedeactivate live-focusout bind-blur live-click live-keydown".split(" "),
  140. counter = 0;
  141. blinker = function(event){
  142. if ( !counter ) {
  143. $("#changes tbody td").text("");
  144. }
  145. var $el = event.data,
  146. prev = $el.text();
  147. prev = prev? prev +" | " : "";
  148. return $el
  149. .text(prev + ++counter+" " + (this.value.replace(/^on$/,"") || this.id || this.checked || ""))
  150. .css("backgroundColor","#0f0")
  151. .delay(800)
  152. .queue(function(next){
  153. $el.css("backgroundColor","#afa");
  154. --counter;
  155. next();
  156. });
  157. };
  158. for ( var i=0; i < events.length; i++ ) {
  159. var m = events[i].split("-"),
  160. api = m[0],
  161. type = m[1],
  162. $row = $("<tr><th>"+type+" "+api+"</th></tr>");
  163. $("#changes thead td").each(function(){
  164. var id = "#"+this.id,
  165. $cell = $('<td></td>');
  166. if ( api == "onX" ) {
  167. $(this).find("input, button, select, textarea").each(function(){
  168. this["on"+type] = function(e){ e = $.event.fix(e||event); e.data = $cell; blinker.call(this, e); };
  169. });
  170. } else if ( api == "bind" ) {
  171. $(this).find("input, button, select, textarea").bind(type, $cell, blinker);
  172. } else {
  173. $(id+" input,"+id+" button,"+id+" select,"+id+" textarea").live(type, $cell, blinker);
  174. }
  175. $row.append($cell);
  176. });
  177. $("#changes tbody").append($row);
  178. }
  179. // Ensure that cloned elements get the delegated event magic; this is
  180. // implementation-specific knowledge but otherwise impossible to test.
  181. // The beforeactivate event attaches a direct-bound change event.
  182. // (Only care about the live change for this third select element.)
  183. var sel1 = $("#select-one select:first-child");
  184. if ( typeof(sel1[0].fireEvent) !== "undefined" ) {
  185. sel1.trigger( "beforeactivate" ).clone().appendTo("#select-one");
  186. //alert($("#select-one select").map(function(){ return this._change_attached || "undef"; }).get().join("|"));
  187. }
  188. jQuery.fn.blink = function(){
  189. return this
  190. .css("backgroundColor","green")
  191. .text( (parseInt(this.text(), 10) || 0) + 1 )
  192. .delay(700).queue(function(next){
  193. jQuery(this).css("backgroundColor","#afa");
  194. next();
  195. });
  196. };
  197. jQuery.fn.addSubmitTest = function( id, prevent ) {
  198. return this.live("submit", function(e){
  199. if ( prevent ) {
  200. e.preventDefault();
  201. }
  202. jQuery(id).blink();
  203. });
  204. };
  205. $("#text_submit").addSubmitTest("#textSubmit", true);
  206. $("#password_submit").addSubmitTest("#passwordSubmit", true);
  207. $("#submit_submit").addSubmitTest("#submitSubmit", true);
  208. $("#prog_submit").addSubmitTest("#submitSubmit", true);
  209. $(document).bind("submit", function(){
  210. jQuery("#boundSubmit").blink();
  211. });
  212. </script>
  213. </body>
  214. </html>