jquery/test/delegatetest.html
Michał Gołębiowski-Owczarek 93ca49e6d1
Core: Simplify code post browser support reduction
Summary of the changes:
* Core: Simplify code post browser support reduction
* Tests: Remove legacy jQuery.cache & oldIE leftovers
* Tests: Reformat JavaScript in delegatetest.html
* Docs: "jQuery Foundation Projects" -> "jQuery Projects"
* Tests: Drop an unused localfile.html file (modern browsers don't support
  the `file:` protocol this way, there's no point in keeping the file around)
* Effects: Remove a redundant `!fn` check (`fn || !fn && easing` is equivalent
  to `fn || easing`; simplify the code)
* CSS: Explain the fallback to direct object access in curCSS better
* Tests: Deduplicate `jQuery.parseHTML` test titles
* Dimensions: Add a test for fractional values
* Tests: Fix a buggy WebKit regex

Closes gh-5296
2023-09-20 00:54:40 +02:00

221 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Event Delegation Tests</title>
<script src="jquery.js"></script>
<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>
<h2>Delegate Tests (<span id="fileversion">x</span>)</h2>
<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>
<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>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>NOTE: Only IE supports propertychange, beforeactivate, beforedeactivate; buttons do not support change events.</p>
<h2>Submit Tests</h2>
<table>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
<form id="autosub"><input type=submit name=subme /></form>
<script type='text/javascript'>
$( "#fileversion" ).text( $.fn.jquery );
// Try an auto-submit, it should only fire once
$( function() {
var triggered = false;
$( "#autosub input" ).trigger( "keypress" );
$( "body" ).on( "submit", "#autosub", function( e ) {
e.preventDefault();
e.stopPropagation();
if ( triggered ) {
alert( "autosubmit FAIL" );
}
triggered = true;
} );
$( "#autosub" ).submit().remove();
} );
// Events we want to track in row-order
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( " " ),
counter = 0;
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();
} );
};
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>" );
$( "#changes thead td" ).each( function() {
var id = "#" + this.id,
$cell = $( "<td></td>" );
if ( api == "onX" ) {
$( 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 );
};
} );
} else if ( api == "bind" ) {
$( this ).find( "input, button, select, textarea" ).bind( type, $cell, blinker );
} else {
$( id + " input," + id + " button," + id + " select," + id + " textarea" ).live( type, $cell, blinker );
}
$row.append( $cell );
} );
$( "#changes tbody" ).append( $row );
}
jQuery.fn.blink = function() {
return this
.css( "backgroundColor", "green" )
.text( ( parseInt( this.text(), 10 ) || 0 ) + 1 )
.delay( 700 ).queue( function( next ) {
jQuery( this ).css( "backgroundColor", "#afa" );
next();
} );
};
jQuery.fn.addSubmitTest = function( id, prevent ) {
return this.live( "submit", function( e ) {
if ( prevent ) {
e.preventDefault();
}
jQuery( id ).blink();
} );
};
$( "#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();
} );
</script>
</body>
</html>