Improve delegation/change tests to display event firing order and duplicate events.

author: Dave Methvin <dave.methvin@gmail.com> 2011-09-11 20:38:54 -0400
committer: timmywil <timmywillisn@gmail.com> 2011-09-19 15:42:32 -0400
commit: 30249ab572ab26ae3b0d9873d393cd4cb415a9f6 (patch)
tree: cc4a4bb6936d8682d83c46a629f6d537663eeff8
parent: 06e56acb0d6f3d183389d3bcb7dfb54b7ae7c220 (diff)
download: jquery-30249ab572ab26ae3b0d9873d393cd4cb415a9f6.tar.gz
jquery-30249ab572ab26ae3b0d9873d393cd4cb415a9f6.zip
1 files changed, 158 insertions, 228 deletions
diff --git a/test/delegatetest.html b/test/delegatetest.html
index 2483063ae..6938f7e1f 100644
--- a/test/delegatetest.html
+++ b/test/delegatetest.html
@@ -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'>
-	jQuery.fn.addChangeClickTest = function( id, prevent ) {
-		this.bind("focusin", function(){
-			jQuery(id + "focus").blink();
-		}).bind("focusout", function(){
-			jQuery(id + "blur").blink();
-		});
-
-		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();
-  	});
-	};
+<script type='text/javascript'>
 
+$("#version").text(version);
+$("#fileversion").text($.fn.jquery);
 
-	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();
-   		});
+// 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();
+			});
 	};
 
-	$(document).bind("focusin", function() {
-		jQuery("#boundFocus").blink();
-	});
-
-	$(document).bind("focusout", function() {
-		jQuery("#boundBlur").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>");
 	
-	$(document).bind("click", function() {
-		jQuery("#boundClick").blink();
-	});
-
-	$("td.red").live("hover", function(e) {
-		if ( e.type === "mouseenter" ) {
-			$(this).css("backgroundColor","green");
+	$("#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 {
-			$(this).css("backgroundColor","");
+			$(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");
 
-	$(".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();
+jQuery.fn.blink = function(){
+	return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
+			jQuery(this).css("backgroundColor","");
+		next();
 	});
+};
 
-	$("#text_submit").addSubmitTest("#textSubmit", true);
-	$("#password_submit").addSubmitTest("#passwordSubmit", true);
-	$("#submit_submit").addSubmitTest("#submitSubmit", true);
-	$(document).bind("submit", function(){
-		jQuery("#boundSubmit").blink();
+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>
+</script>
+</body>
 </html>
author	Dave Methvin <dave.methvin@gmail.com>	2011-09-11 20:38:54 -0400
committer	timmywil <timmywillisn@gmail.com>	2011-09-19 15:42:32 -0400
commit	30249ab572ab26ae3b0d9873d393cd4cb415a9f6 (patch)
tree	cc4a4bb6936d8682d83c46a629f6d537663eeff8
parent	06e56acb0d6f3d183389d3bcb7dfb54b7ae7c220 (diff)
download	jquery-30249ab572ab26ae3b0d9873d393cd4cb415a9f6.tar.gz jquery-30249ab572ab26ae3b0d9873d393cd4cb415a9f6.zip