library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
532bec4c69
jquery/test/delegatetest.html

234 lines
7.4 KiB
HTML
Raw Normal View History

Adding in support for bubbling submit and change events, thanks to the patch by Justin Meyer. Includes a delegation test suite for manually testing to see if the events work as intended.
2009-12-04 16:28:50 +00:00
<html>
<head>
<script src='../dist/jquery.js' type='text/javascript'></script>
<style>
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
.red {
background-color: red;
border: solid 3px red;
}
Adding in support for bubbling submit and change events, thanks to the patch by Justin Meyer. Includes a delegation test suite for manually testing to see if the events work as intended.
2009-12-04 16:28:50 +00:00
</style>
</head>
<body>
<h2>Change Tests</h2>
<table>
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
<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 (with a selected) fired change on first focus in IE. Fixes #5869.
2010-01-23 17:52:32 +00:00
<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>
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
</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>
<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
<label for="checkbox3">Checkbox 3</label>
</td>
</td>
</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>
<input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
<label for="radio3">Radio3</label>
</td>
<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>$(document).bind('change')</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='radio' class="red">RADIO</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='radiobind' class="red">RADIO</td>
<td id='textbind' class="red">TEXT</td>
<td id='textareabind' class="red">TEXTAREA</td>
</tr>
Stop trying to emulate the focus/blur event in IE, doesn't work as one might expect, anyway. Instead, implement the focusin/focusout events in all other browsers - which creates a much better parity across all browsers. Uses event capturing instead of bubbling to make it happen. Thanks to Alexander for the recommendation and to Joern Zaefferer for the original focus/blur delegation code.
2009-12-21 21:10:21 +00:00
<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='radiofocus' class="red">RADIO</td>
<td id='textfocus' class="red">TEXT</td>
<td id='textareafocus' class="red">TEXTAREA</td>
Added support for multiple live event handlers, live hover, and live focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.
2010-01-23 16:56:24 +00:00
<td id='boundFocus' class="red">DOCUMENT</td>
Stop trying to emulate the focus/blur event in IE, doesn't work as one might expect, anyway. Instead, implement the focusin/focusout events in all other browsers - which creates a much better parity across all browsers. Uses event capturing instead of bubbling to make it happen. Thanks to Alexander for the recommendation and to Joern Zaefferer for the original focus/blur delegation code.
2009-12-21 21:10:21 +00:00
</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='radioblur' class="red">RADIO</td>
<td id='textblur' class="red">TEXT</td>
<td id='textareablur' class="red">TEXTAREA</td>
Added support for multiple live event handlers, live hover, and live focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.
2010-01-23 16:56:24 +00:00
<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='radiolfocus' class="red">RADIO</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='radiolblur' class="red">RADIO</td>
<td id='textlblur' class="red">TEXT</td>
<td id='textarealblur' class="red">TEXTAREA</td>
Stop trying to emulate the focus/blur event in IE, doesn't work as one might expect, anyway. Instead, implement the focusin/focusout events in all other browsers - which creates a much better parity across all browsers. Uses event capturing instead of bubbling to make it happen. Thanks to Alexander for the recommendation and to Joern Zaefferer for the original focus/blur delegation code.
2009-12-21 21:10:21 +00:00
</tr>
Adding in support for bubbling submit and change events, thanks to the patch by Justin Meyer. Includes a delegation test suite for manually testing to see if the events work as intended.
2009-12-04 16:28:50 +00:00
</table>
<h2>Submit Tests</h2>
<table>
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
<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>
Adding in support for bubbling submit and change events, thanks to the patch by Justin Meyer. Includes a delegation test suite for manually testing to see if the events work as intended.
2009-12-04 16:28:50 +00:00
</table>
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
<ul id="log"></ul>
Adding in support for bubbling submit and change events, thanks to the patch by Justin Meyer. Includes a delegation test suite for manually testing to see if the events work as intended.
2009-12-04 16:28:50 +00:00
<script type='text/javascript'>
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
jQuery.fn.addChangeTest = function( id, prevent ) {
Stop trying to emulate the focus/blur event in IE, doesn't work as one might expect, anyway. Instead, implement the focusin/focusout events in all other browsers - which creates a much better parity across all browsers. Uses event capturing instead of bubbling to make it happen. Thanks to Alexander for the recommendation and to Joern Zaefferer for the original focus/blur delegation code.
2009-12-21 21:10:21 +00:00
this.bind("focusin", function(){
jQuery(id + "focus").blink();
}).bind("focusout", function(){
jQuery(id + "blur").blink();
});
Added support for multiple live event handlers, live hover, and live focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.
2010-01-23 16:56:24 +00:00
this.bind("focus", function(){
jQuery(id + "lfocus").blink();
}).bind("blur", function(){
jQuery(id + "lblur").blink();
});
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
return this.bind("change", function(e){
jQuery(id + "bind").blink();
}).live("change", function(e){
if ( prevent ) {
e.preventDefault();
}
jQuery(id).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();
});
};
Added support for multiple live event handlers, live hover, and live focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.
2010-01-23 16:56:24 +00:00
$(document).bind("focusin", function() {
jQuery("#boundFocus").blink();
});
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
Added support for multiple live event handlers, live hover, and live focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.
2010-01-23 16:56:24 +00:00
$(document).bind("focusout", function() {
jQuery("#boundBlur").blink();
});
$("td.red").live("hover", function(e) {
if ( e.type === "mouseenter" ) {
$(this).css("backgroundColor","green");
} else {
$(this).css("backgroundColor","");
}
});
Used the patch from Alexander as the basis for a rewrite of the IE change event logic. Now has full parity with the regular change event in other browsers: Works with regular bind, works better with multiple selects, works as a regular change event (note test suite changes), works with readonly/disabled inputs, and much more. The original patch had a number of problems, including firing the change event too many times, not bubblinb properly, and not handling clicks on multi-selects properly - that should all be fixed now. Thanks Alexander for the patch pushing in the right direction.
2009-12-21 20:32:32 +00:00
$(".select_test").addChangeTest("#select");
$(".mselect_test").addChangeTest("#mselect");
$(".checkbox_test").addChangeTest("#checkbox");
$(".radio_test").addChangeTest("#radio");
$('textarea').addChangeTest("#textarea");
$('#input').addChangeTest("#text");
$(document).bind("change", function(){
jQuery("#boundChange").blink();
});
$("#text_submit").addSubmitTest("#textSubmit", true);
$("#password_submit").addSubmitTest("#passwordSubmit", true);
$("#submit_submit").addSubmitTest("#submitSubmit", true);
$(document).bind("submit", function(){
jQuery("#boundSubmit").blink();
});
Adding in support for bubbling submit and change events, thanks to the patch by Justin Meyer. Includes a delegation test suite for manually testing to see if the events work as intended.
2009-12-04 16:28:50 +00:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink