test/delegatetest.html

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