2011-09-12 00:38:54 +00:00
|
|
|
<!DOCTYPE html>
|
2010-11-12 05:42:53 +00:00
|
|
|
<html>
|
2011-09-12 00:38:54 +00:00
|
|
|
<head>
|
2011-09-21 02:18:34 +00:00
|
|
|
<title>Event Delegation Tests</title>
|
2013-01-28 04:34:38 +00:00
|
|
|
<script src="jquery.js"></script>
|
2011-09-12 00:38:54 +00:00
|
|
|
<style>
|
|
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
empty-cells: show;
|
|
|
|
|
}
|
|
|
|
|
th {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
thead td {
|
|
|
|
|
width: 11%;
|
|
|
|
|
}
|
|
|
|
|
tbody td {
|
|
|
|
|
background: #fed;
|
|
|
|
|
}
|
|
|
|
|
th, td {
|
|
|
|
|
border: 1px solid #bbb;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2012-01-12 02:35:13 +00:00
|
|
|
<h2>Delegate Tests (<span id="fileversion">x</span>)</h2>
|
2011-09-12 00:38:54 +00:00
|
|
|
|
|
|
|
|
<table id="changes">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>
|
|
|
|
|
Controls:
|
|
|
|
|
</th>
|
|
|
|
|
<td id="select-one">
|
|
|
|
|
<select>
|
|
|
|
|
<option value='one1'>one1</option>
|
|
|
|
|
<option value='one2'>one2</option>
|
|
|
|
|
<option value='one3'>one3</option>
|
|
|
|
|
</select>
|
|
|
|
|
<select>
|
|
|
|
|
<option value='two1'>two1</option>
|
|
|
|
|
<option value='two2' selected="selected">two2</option>
|
|
|
|
|
<option value='two3'>two3</option>
|
|
|
|
|
</select>
|
|
|
|
|
</td>
|
|
|
|
|
<td id="select-mult">
|
|
|
|
|
<select multiple="multiple">
|
|
|
|
|
<option value='multi1'>multi1</option>
|
|
|
|
|
<option value='multi2'>multi2</option>
|
|
|
|
|
<option value='multi3'>multi3</option>
|
|
|
|
|
</select>
|
|
|
|
|
</td>
|
|
|
|
|
<td id="checkbox">
|
|
|
|
|
<input type="checkbox" name="mycheckbox" id="check1"/>
|
|
|
|
|
<label for="check1">check1</label><br/>
|
|
|
|
|
<input type="checkbox" name="mycheckbox" id="check2"/>
|
|
|
|
|
<label for="check2">check2</label><br />
|
|
|
|
|
<input type="checkbox" name="mycheckbox" id="check3" disabled="disabled"/>
|
|
|
|
|
<label for="check3">check3</label>
|
|
|
|
|
</td>
|
|
|
|
|
<td id="radio">
|
|
|
|
|
<input type="radio" name="myradio" id="radio1"/>
|
|
|
|
|
<label for="radio1">Radio1</label><br/>
|
|
|
|
|
<input type="radio" name="myradio" id="radio2"/>
|
|
|
|
|
<label for="radio2">Radio2</label><br />
|
|
|
|
|
<input type="radio" name="myradio" id="radio3" disabled="disabled"/>
|
|
|
|
|
<label for="radio3">Radio3</label>
|
|
|
|
|
</td>
|
|
|
|
|
<td id="file">
|
|
|
|
|
<input class="file_test" id="file1" type="file"/>
|
|
|
|
|
</td>
|
|
|
|
|
<td id="text">
|
|
|
|
|
<input class='test' value='' id='input' size='10' />
|
|
|
|
|
<input class='test' value='test' id='input2' size='10' readonly="readonly" />
|
|
|
|
|
</td>
|
|
|
|
|
<td id="textarea">
|
|
|
|
|
<textarea rows='2'></textarea>
|
|
|
|
|
</td>
|
2011-09-21 02:18:34 +00:00
|
|
|
<td id="button">
|
|
|
|
|
<button name="mybutton1" id="button1">Button</button><br />
|
|
|
|
|
<button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
|
|
|
|
|
<button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
|
|
|
|
|
<button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
|
|
|
|
|
</td>
|
2011-09-12 00:38:54 +00:00
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2011-09-12 01:18:32 +00:00
|
|
|
<p>NOTE: Only IE supports propertychange, beforeactivate, beforedeactivate; buttons do not support change events.</p>
|
2011-09-12 00:38:54 +00:00
|
|
|
|
2012-05-18 17:28:50 +00:00
|
|
|
<h2>Submit Tests</h2>
|
|
|
|
|
<table>
|
2010-11-12 05:42:53 +00:00
|
|
|
<tr>
|
2012-05-18 17:28:50 +00:00
|
|
|
<td>
|
|
|
|
|
Submit each:
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<form action="" id="text_submit">
|
|
|
|
|
<input class='test' type='text' value='Key Return To Submit'/>
|
|
|
|
|
</form>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<form action="" id="password_submit">
|
|
|
|
|
<input class='test' type='password' value=''/>
|
|
|
|
|
</form>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<form action="" id="submit_submit">
|
|
|
|
|
<input type='submit' value="Click Me To Submit" />
|
|
|
|
|
</form>
|
|
|
|
|
</td>
|
|
|
|
|
<td>$(document).bind('submit')</td>
|
2010-11-12 05:42:53 +00:00
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2012-05-18 17:28:50 +00:00
|
|
|
<td>Results:</td>
|
|
|
|
|
<td id='textSubmit' class="red">TEXT</td>
|
|
|
|
|
<td id='passwordSubmit' class="red">PASSWORD</td>
|
|
|
|
|
<td id='submitSubmit' class="red">BUTTON</td>
|
|
|
|
|
<td id='boundSubmit' class="red">DOCUMENT</td>
|
2010-11-12 05:42:53 +00:00
|
|
|
</tr>
|
2012-05-18 17:28:50 +00:00
|
|
|
</table>
|
2010-11-12 05:42:53 +00:00
|
|
|
|
2011-11-16 02:06:53 +00:00
|
|
|
<form id="autosub"><input type=submit name=subme /></form>
|
2012-06-04 16:48:18 +00:00
|
|
|
|
2011-09-12 00:38:54 +00:00
|
|
|
<script type='text/javascript'>
|
2010-11-12 05:42:53 +00:00
|
|
|
|
2023-09-19 22:54:40 +00:00
|
|
|
$( "#fileversion" ).text( $.fn.jquery );
|
2011-02-18 18:09:07 +00:00
|
|
|
|
2011-11-16 02:06:53 +00:00
|
|
|
// Try an auto-submit, it should only fire once
|
2023-09-19 22:54:40 +00:00
|
|
|
$( function() {
|
2011-11-16 02:06:53 +00:00
|
|
|
var triggered = false;
|
2023-09-19 22:54:40 +00:00
|
|
|
$( "#autosub input" ).trigger( "keypress" );
|
|
|
|
|
$( "body" ).on( "submit", "#autosub", function( e ) {
|
2011-11-16 02:06:53 +00:00
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
if ( triggered ) {
|
2023-09-19 22:54:40 +00:00
|
|
|
alert( "autosubmit FAIL" );
|
2011-11-16 02:06:53 +00:00
|
|
|
}
|
|
|
|
|
triggered = true;
|
2023-09-19 22:54:40 +00:00
|
|
|
} );
|
|
|
|
|
$( "#autosub" ).submit().remove();
|
|
|
|
|
} );
|
2011-11-16 02:06:53 +00:00
|
|
|
|
2011-09-12 00:38:54 +00:00
|
|
|
// Events we want to track in row-order
|
2023-09-19 22:54:40 +00:00
|
|
|
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( " " ),
|
2011-09-12 00:38:54 +00:00
|
|
|
counter = 0;
|
2023-09-19 22:54:40 +00:00
|
|
|
blinker = function( event ) {
|
|
|
|
|
if ( !counter ) {
|
|
|
|
|
$( "#changes tbody td" ).text( "" );
|
|
|
|
|
}
|
|
|
|
|
var $el = event.data,
|
|
|
|
|
prev = $el.text();
|
|
|
|
|
prev = prev ? prev + " | " : "";
|
|
|
|
|
return $el
|
|
|
|
|
.text( prev + ++counter + " " + ( this.value.replace( /^on$/, "" ) || this.id || this.checked || "" ) )
|
|
|
|
|
.css( "backgroundColor", "#0f0" )
|
|
|
|
|
.delay( 800 )
|
|
|
|
|
.queue( function( next ) {
|
|
|
|
|
$el.css( "backgroundColor", "#afa" );
|
|
|
|
|
--counter;
|
|
|
|
|
next();
|
|
|
|
|
} );
|
|
|
|
|
};
|
2010-11-12 05:42:53 +00:00
|
|
|
|
2023-09-19 22:54:40 +00:00
|
|
|
for ( var i = 0; i < events.length; i++ ) {
|
|
|
|
|
var m = events[ i ].split( "-" ),
|
|
|
|
|
api = m[ 0 ],
|
|
|
|
|
type = m[ 1 ],
|
|
|
|
|
$row = $( "<tr><th>" + type + " " + api + "</th></tr>" );
|
2012-06-04 16:48:18 +00:00
|
|
|
|
2023-09-19 22:54:40 +00:00
|
|
|
$( "#changes thead td" ).each( function() {
|
|
|
|
|
var id = "#" + this.id,
|
|
|
|
|
$cell = $( "<td></td>" );
|
2012-01-28 21:46:52 +00:00
|
|
|
if ( api == "onX" ) {
|
2023-09-19 22:54:40 +00:00
|
|
|
$( this ).find( "input, button, select, textarea" ).each( function() {
|
|
|
|
|
this[ "on" + type ] = function( e ) {
|
|
|
|
|
e = $.event.fix( e || event ); e.data = $cell; blinker.call( this, e );
|
|
|
|
|
};
|
|
|
|
|
} );
|
2011-09-12 01:18:32 +00:00
|
|
|
} else if ( api == "bind" ) {
|
2023-09-19 22:54:40 +00:00
|
|
|
$( this ).find( "input, button, select, textarea" ).bind( type, $cell, blinker );
|
2010-11-12 05:42:53 +00:00
|
|
|
} else {
|
2023-09-19 22:54:40 +00:00
|
|
|
$( id + " input," + id + " button," + id + " select," + id + " textarea" ).live( type, $cell, blinker );
|
2010-11-12 05:42:53 +00:00
|
|
|
}
|
2023-09-19 22:54:40 +00:00
|
|
|
$row.append( $cell );
|
|
|
|
|
} );
|
|
|
|
|
$( "#changes tbody" ).append( $row );
|
2012-01-28 21:46:52 +00:00
|
|
|
}
|
|
|
|
|
|
2023-09-19 22:54:40 +00:00
|
|
|
jQuery.fn.blink = function() {
|
2011-11-16 02:06:53 +00:00
|
|
|
return this
|
2023-09-19 22:54:40 +00:00
|
|
|
.css( "backgroundColor", "green" )
|
|
|
|
|
.text( ( parseInt( this.text(), 10 ) || 0 ) + 1 )
|
|
|
|
|
.delay( 700 ).queue( function( next ) {
|
|
|
|
|
jQuery( this ).css( "backgroundColor", "#afa" );
|
2011-11-16 02:06:53 +00:00
|
|
|
next();
|
2023-09-19 22:54:40 +00:00
|
|
|
} );
|
2011-09-12 00:38:54 +00:00
|
|
|
};
|
2010-12-30 06:34:48 +00:00
|
|
|
|
2011-09-12 00:38:54 +00:00
|
|
|
jQuery.fn.addSubmitTest = function( id, prevent ) {
|
2023-09-19 22:54:40 +00:00
|
|
|
return this.live( "submit", function( e ) {
|
2011-09-12 00:38:54 +00:00
|
|
|
if ( prevent ) {
|
2023-09-19 22:54:40 +00:00
|
|
|
e.preventDefault();
|
2011-09-12 00:38:54 +00:00
|
|
|
}
|
2023-09-19 22:54:40 +00:00
|
|
|
jQuery( id ).blink();
|
|
|
|
|
} );
|
2011-09-12 00:38:54 +00:00
|
|
|
};
|
|
|
|
|
|
2023-09-19 22:54:40 +00:00
|
|
|
$( "#text_submit" ).addSubmitTest( "#textSubmit", true );
|
|
|
|
|
$( "#password_submit" ).addSubmitTest( "#passwordSubmit", true );
|
|
|
|
|
$( "#submit_submit" ).addSubmitTest( "#submitSubmit", true );
|
|
|
|
|
$( "#prog_submit" ).addSubmitTest( "#submitSubmit", true );
|
|
|
|
|
$( document ).bind( "submit", function() {
|
|
|
|
|
jQuery( "#boundSubmit" ).blink();
|
|
|
|
|
} );
|
2010-12-30 06:34:48 +00:00
|
|
|
|
2011-09-12 00:38:54 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2010-11-12 05:42:53 +00:00
|
|
|
</html>
|
