123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- <!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>
|