mirror of
https://github.com/jquery/jquery.git
synced 2024-11-23 02:54:22 +00:00
Improve delegation/change tests to display event firing order and duplicate events.
This commit is contained in:
Dave Methvin
timmywil
parent
06e56acb0d
commit
30249ab572
@ -1,157 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src='../dist/jquery.js' type='text/javascript'></script>
|
||||
<style>
|
||||
.red {
|
||||
background-color: red;
|
||||
border: solid 3px red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Change Tests</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Change each:
|
||||
</td>
|
||||
<td>
|
||||
<select class='select_test'>
|
||||
<option value='one'>change me 1</option>
|
||||
<option value='two'>change me 2</option>
|
||||
<option value='three'>change me 3</option>
|
||||
</select>
|
||||
<select class='select_test'>
|
||||
<option value='one'>change me 1</option>
|
||||
<option value='two' selected="selected">change me 2</option>
|
||||
<option value='three'>change me 3</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select class='mselect_test' multiple="multiple">
|
||||
<option value='one'>change me 1</option>
|
||||
<option value='two'>change me 2</option>
|
||||
<option value='three'>change me 3</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
|
||||
<label for="checkbox1">Checkbox 1</label><br/>
|
||||
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
|
||||
<label for="checkbox2">Checkbox 2</label><br />
|
||||
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
|
||||
<label for="checkbox3">Checkbox 3</label>
|
||||
</td>
|
||||
<td>
|
||||
<button class="button_test" name="mybutton1" id="button1">Button</button><br />
|
||||
<button class="button_test" name="mybutton1" id="button1"><span>Button w/ child</span></button><br />
|
||||
<button class="button_test" name="mybutton1" id="button1" disabled="disabled">Button Disabled</button><br />
|
||||
<button class="button_test" name="mybutton1" id="button1" disabled="disabled"><span disabled="disabled">Button w/ child Dis.</span></button><br />
|
||||
</td>
|
||||
<td>
|
||||
<input type="radio" class="radio_test" name="myradio" id="radio1"/>
|
||||
<label for="radio1">Radio1</label><br/>
|
||||
<input type="radio" class="radio_test" name="myradio" id="radio2"/>
|
||||
<label for="radio2">Radio2</label><br />
|
||||
<input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
|
||||
<label for="radio3">Radio3</label>
|
||||
</td>
|
||||
<td>
|
||||
<input class="file_test" id="file1" type="file"/>
|
||||
<td>
|
||||
<input class='test' value='' id='input' size='10' />
|
||||
<input class='test' value='test' id='input2' size='10' readonly="readonly" />
|
||||
</td>
|
||||
<td>
|
||||
<textarea rows='2'></textarea>
|
||||
</td>
|
||||
</td>
|
||||
<td>$(document).bind('change')<br />
|
||||
$(document).bind('click')
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Live:</td>
|
||||
<td id='select' class="red">SELECT</td>
|
||||
<td id='mselect' class="red">MULTI</td>
|
||||
<td id='checkbox' class="red">CHECKBOX</td>
|
||||
<td id='button' class="red">BUTTON</td>
|
||||
<td id='radio' class="red">RADIO</td>
|
||||
<td id='file' class="red">FILE</td>
|
||||
<td id='text' class="red">TEXT</td>
|
||||
<td id='textarea' class="red">TEXTAREA</td>
|
||||
<td id='boundChange' class="red">DOCUMENT</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bind:</td>
|
||||
<td id='selectbind' class="red">SELECT</td>
|
||||
<td id='mselectbind' class="red">MULTI</td>
|
||||
<td id='checkboxbind' class="red">CHECKBOX</td>
|
||||
<td id='buttonbind' class="red">BUTTON</td>
|
||||
<td id='radiobind' class="red">RADIO</td>
|
||||
<td id='filebind' class="red">FILE</td>
|
||||
<td id='textbind' class="red">TEXT</td>
|
||||
<td id='textareabind' class="red">TEXTAREA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Focusin:</td>
|
||||
<td id='selectfocus' class="red">SELECT</td>
|
||||
<td id='mselectfocus' class="red">MULTI</td>
|
||||
<td id='checkboxfocus' class="red">CHECKBOX</td>
|
||||
<td id='buttonfocus' class="red">BUTTON</td>
|
||||
<td id='radiofocus' class="red">RADIO</td>
|
||||
<td id='filefocus' class="red">FILE</td>
|
||||
<td id='textfocus' class="red">TEXT</td>
|
||||
<td id='textareafocus' class="red">TEXTAREA</td>
|
||||
<td id='boundFocus' class="red">DOCUMENT</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Focusout:</td>
|
||||
<td id='selectblur' class="red">SELECT</td>
|
||||
<td id='mselectblur' class="red">MULTI</td>
|
||||
<td id='checkboxblur' class="red">CHECKBOX</td>
|
||||
<td id='buttonblur' class="red">BUTTON</td>
|
||||
<td id='radioblur' class="red">RADIO</td>
|
||||
<td id='fileblur' class="red">FILE</td>
|
||||
<td id='textblur' class="red">TEXT</td>
|
||||
<td id='textareablur' class="red">TEXTAREA</td>
|
||||
<td id='boundBlur' class="red">DOCUMENT</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Live Focus:</td>
|
||||
<td id='selectlfocus' class="red">SELECT</td>
|
||||
<td id='mselectlfocus' class="red">MULTI</td>
|
||||
<td id='checkboxlfocus' class="red">CHECKBOX</td>
|
||||
<td id='buttonlfocus' class="red">BUTTON</td>
|
||||
<td id='radiolfocus' class="red">RADIO</td>
|
||||
<td id='filelfocus' class="red">FILE</td>
|
||||
<td id='textlfocus' class="red">TEXT</td>
|
||||
<td id='textarealfocus' class="red">TEXTAREA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Live Blur:</td>
|
||||
<td id='selectlblur' class="red">SELECT</td>
|
||||
<td id='mselectlblur' class="red">MULTI</td>
|
||||
<td id='checkboxlblur' class="red">CHECKBOX</td>
|
||||
<td id='buttonlblur' class="red">BUTTON</td>
|
||||
<td id='radiolblur' class="red">RADIO</td>
|
||||
<td id='filelblur' class="red">FILE</td>
|
||||
<td id='textlblur' class="red">TEXT</td>
|
||||
<td id='textarealblur' class="red">TEXTAREA</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Live Click:</td>
|
||||
<td id='selectlclick' class="red">SELECT</td>
|
||||
<td id='mselectlclick' class="red">MULTI</td>
|
||||
<td id='checkboxlclick' class="red">CHECKBOX</td>
|
||||
<td id='buttonlclick' class="red">BUTTON</td>
|
||||
<td id='radiolclick' class="red">RADIO</td>
|
||||
<td id='filelclick' class="red">FILE</td>
|
||||
<td id='textlclick' class="red">TEXT</td>
|
||||
<td id='textarealclick' class="red">TEXTAREA</td>
|
||||
<td id='boundClick' class="red">DOCUMENT</td>
|
||||
</tr>
|
||||
</table>
|
||||
<head>
|
||||
<title>Change Tests</title>
|
||||
<script>
|
||||
var version = location.search && location.search.substr(1);
|
||||
if ( version ) {
|
||||
version = "http://code.jquery.com/jquery-"+version+".js";
|
||||
} else {
|
||||
version = "../dist/jquery.js";
|
||||
}
|
||||
document.write('<script src="'+version+'"><'+'/script>');
|
||||
</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="version">BAD FILE IN URL</span>, <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="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>
|
||||
<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>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>NOTE: Only IE supports beforeactivate/beforedeactivate; buttons do not support change events.</p>
|
||||
|
||||
<h2>Submit Tests</h2>
|
||||
<table>
|
||||
<tr>
|
||||
@ -184,92 +130,76 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<ul id="log"></ul>
|
||||
<script type='text/javascript'>
|
||||
|
||||
<script type='text/javascript'>
|
||||
jQuery.fn.addChangeClickTest = function( id, prevent ) {
|
||||
this.bind("focusin", function(){
|
||||
jQuery(id + "focus").blink();
|
||||
}).bind("focusout", function(){
|
||||
jQuery(id + "blur").blink();
|
||||
});
|
||||
$("#version").text(version);
|
||||
$("#fileversion").text($.fn.jquery);
|
||||
|
||||
this.bind("focus", function(){
|
||||
jQuery(id + "lfocus").blink();
|
||||
}).bind("blur", function(){
|
||||
jQuery(id + "lblur").blink();
|
||||
});
|
||||
|
||||
return this.bind("change", function(e){
|
||||
jQuery(id + "bind").blink();
|
||||
}).live("change", function(e){
|
||||
if ( prevent ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
jQuery(id).blink();
|
||||
}).live("click", function(e){
|
||||
jQuery(id + "lclick").blink();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
jQuery.fn.addSubmitTest = function( id, prevent ) {
|
||||
return this.live("submit", function(e){
|
||||
if ( prevent ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
jQuery(id).blink();
|
||||
});
|
||||
};
|
||||
|
||||
jQuery.fn.blink = function(){
|
||||
return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
|
||||
jQuery(this).css("backgroundColor","");
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
$(document).bind("focusin", function() {
|
||||
jQuery("#boundFocus").blink();
|
||||
});
|
||||
|
||||
$(document).bind("focusout", function() {
|
||||
jQuery("#boundBlur").blink();
|
||||
});
|
||||
|
||||
$(document).bind("click", function() {
|
||||
jQuery("#boundClick").blink();
|
||||
});
|
||||
|
||||
$("td.red").live("hover", function(e) {
|
||||
if ( e.type === "mouseenter" ) {
|
||||
$(this).css("backgroundColor","green");
|
||||
} else {
|
||||
$(this).css("backgroundColor","");
|
||||
// Events we want to track in row-order
|
||||
var events = "bind-change live-change live-beforeactivate live-focusin bind-focus live-keydown live-beforedeactivate live-focusout bind-blur live-click".split(" "),
|
||||
counter = 0;
|
||||
blinker = function(event){
|
||||
if ( !counter ) {
|
||||
$("#changes tbody td").text("");
|
||||
}
|
||||
});
|
||||
var $els = event.data,
|
||||
prev = $els.text();
|
||||
prev = prev? prev +" | " : "";
|
||||
return $els
|
||||
.text(prev + ++counter+" " + (this.value.replace(/^on$/,"") || this.id || this.checked || ""))
|
||||
.css("backgroundColor","#0f0")
|
||||
.delay(1000)
|
||||
.queue(function(next){
|
||||
$els.css("backgroundColor","#afa");
|
||||
--counter;
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
$(".select_test").addChangeClickTest("#select");
|
||||
$(".mselect_test").addChangeClickTest("#mselect");
|
||||
$(".checkbox_test").addChangeClickTest("#checkbox");
|
||||
$(".radio_test").addChangeClickTest("#radio");
|
||||
$(".file_test").addChangeClickTest("#file");
|
||||
$('textarea').addChangeClickTest("#textarea");
|
||||
$('#input').addChangeClickTest("#text");
|
||||
$('button').addChangeClickTest("#button");
|
||||
$(document).bind("change", function(){
|
||||
jQuery("#boundChange").blink();
|
||||
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 == "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);
|
||||
}
|
||||
// Buttons don't fire change events so show the cell as gray
|
||||
$("#changes tbody").find("tr:eq(0), tr:eq(1)").find("td:eq(3)").css("background", "#eee");
|
||||
|
||||
$("#text_submit").addSubmitTest("#textSubmit", true);
|
||||
$("#password_submit").addSubmitTest("#passwordSubmit", true);
|
||||
$("#submit_submit").addSubmitTest("#submitSubmit", true);
|
||||
$(document).bind("submit", function(){
|
||||
jQuery("#boundSubmit").blink();
|
||||
jQuery.fn.blink = function(){
|
||||
return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
|
||||
jQuery(this).css("backgroundColor","");
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
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);
|
||||
$(document).bind("submit", function(){
|
||||
jQuery("#boundSubmit").blink();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user