mirror of
https://github.com/jquery/jquery.git
synced 2024-10-05 11:34:18 +00:00
229 lines
6.3 KiB
HTML
229 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Event Delegation Tests</title>
|
|
<script src="../dist/jquery.min.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);
|
|
}
|
|
|
|
// Ensure that cloned elements get the delegated event magic; this is
|
|
// implementation-specific knowledge but otherwise impossible to test.
|
|
// The beforeactivate event attaches a direct-bound change event.
|
|
// (Only care about the live change for this third select element.)
|
|
var sel1 = $("#select-one select:first-child");
|
|
if ( typeof(sel1[0].fireEvent) !== "undefined" ) {
|
|
sel1.trigger( "beforeactivate" ).clone().appendTo("#select-one");
|
|
//alert($("#select-one select").map(function(){ return this._change_attached || "undef"; }).get().join("|"));
|
|
}
|
|
|
|
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>
|