test/delegatetest.html - jquery - Git at Google

 <!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);
 }

 // 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>
	<!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);
	}

	// 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>