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 ) {
 178  e = $.event.fix( e || event ); e.data = $cell; blinker.call( this, e );
 179 };
 180                         } );
 181                 } else if ( api == "bind" ) {
 182                         $( this ).find( "input, button, select, textarea" ).bind( type, $cell, blinker );
 183                 } else {
 184                         $( id + " input," + id + " button," + id + " select," + id + " textarea" ).live( type, $cell, blinker );
 185                 }
 186                 $row.append( $cell );
 187         } );
 188         $( "#changes tbody" ).append( $row );
 189 }
 190
 191 jQuery.fn.blink = function() {
 192         return this
 193                 .css( "backgroundColor", "green" )
 194                 .text( ( parseInt( this.text(), 10 ) || 0 ) + 1 )
 195                 .delay( 700 ).queue( function( next ) {
 196                         jQuery( this ).css( "backgroundColor", "#afa" );
 197                         next();
 198                 } );
 199 };
 200
 201 jQuery.fn.addSubmitTest = function( id, prevent ) {
 202         return this.live( "submit", function( e ) {
 203                 if ( prevent ) {
 204                         e.preventDefault();
 205                 }
 206                 jQuery( id ).blink();
 207         } );
 208 };
 209
 210 $( "#text_submit" ).addSubmitTest( "#textSubmit", true );
 211 $( "#password_submit" ).addSubmitTest( "#passwordSubmit", true );
 212 $( "#submit_submit" ).addSubmitTest( "#submitSubmit", true );
 213 $( "#prog_submit" ).addSubmitTest( "#submitSubmit", true );
 214 $( document ).bind( "submit", function() {
 215         jQuery( "#boundSubmit" ).blink();
 216 } );
 217
 218 </script>
 219 </body>
 220 </html>