test/delegatetest.html

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