Focused support of .live(). stopPropagation and stopImmediatePropagation are not...
[jquery.git] / test / unit / event.js
index 642ba5e..4d2b0aa 100644 (file)
@@ -166,6 +166,72 @@ test("bind(), multi-namespaced events", function() {
        jQuery("#firstp").trigger("custom");
 });
 
+test("unbind(type)", function() {
+       expect( 0 );
+       
+       var $elem = jQuery("#firstp"),
+               message;
+
+       function error(){
+               ok( false, message );
+       }
+       
+       message = "unbind passing function";
+       $elem.bind('error', error).unbind('error',error).triggerHandler('error');
+       
+       message = "unbind all from event";
+       $elem.bind('error', error).unbind('error').triggerHandler('error');
+       
+       message = "unbind all";
+       $elem.bind('error', error).unbind().triggerHandler('error');
+       
+       message = "unbind many with function";
+       $elem.bind('error error2',error)
+                .unbind('error error2', error )
+                .trigger('error').triggerHandler('error2');
+
+       message = "unbind many"; // #3538
+       $elem.bind('error error2',error)
+                .unbind('error error2')
+                .trigger('error').triggerHandler('error2');
+});
+
+test("unbind(eventObject)", function() {
+       expect(4);
+       
+       var $elem = jQuery("#firstp"),
+               num;
+
+       function assert( expected ){
+               num = 0;
+               $elem.trigger('foo').triggerHandler('bar');
+               equals( num, expected, "Check the right handlers are triggered" );
+       }
+       
+       $elem
+               // This handler shouldn't be unbound
+               .bind('foo', function(){
+                       num += 1;
+               })
+               .bind('foo', function(e){
+                       $elem.unbind( e )
+                       num += 2;
+               })
+               // Neither this one
+               .bind('bar', function(){
+                       num += 4;
+               });
+               
+       assert( 7 );
+       assert( 5 );
+       
+       $elem.unbind('bar');
+       assert( 1 );
+       
+       $elem.unbind(); 
+       assert( 0 );
+});
+
 test("trigger() shortcuts", function() {
        expect(6);
        jQuery('<li><a href="#">Change location</a></li>').prependTo('#firstUL').find('a').bind('click', function() {
@@ -198,45 +264,42 @@ test("trigger() shortcuts", function() {
        }).load();
 });
 
-test("unbind(event)", function() {
-       expect(8);
-       var el = jQuery("#firstp");
-       el.click(function() {
-               ok( true, "Fake normal bind" );
-       });
-       el.click(function(event) {
-               el.unbind(event);
-               ok( true, "Fake onebind" );
-       });
-       el.click().click();
-       
-       el.click(function() { return; });
-       el.unbind('click');
-       ok( !el[0].onclick, "Handler is removed" ); // Bug #964
-
-       el.click(function() { return; });
-       el.unbind('change',function(){ return; });
-       for (var ret in jQuery.data(el[0], "events")['click']) break;
-       ok( ret, "Extra handlers weren't accidentally removed." );
-
-       el.unbind('click');
-       ok( !jQuery.data(el[0], "events"), "Removed the events expando after all handlers are unbound." );
-       
-       reset();
-       var clickCounter = (mouseoverCounter = 0);
-       var handler = function(event) {
-               if (event.type == "click")
-                       clickCounter += 1;
-               else if (event.type == "mouseover")
-                       mouseoverCounter += 1;
-       };
-       jQuery("#firstp").bind("click mouseover", handler).unbind("click mouseover", handler).trigger("click").trigger("mouseover");
-       equals( clickCounter, 0, "unbind() with multiple events at once" );
-       equals( mouseoverCounter, 0, "unbind() with multiple events at once" );
+test("trigger() bubbling", function() {
+       expect(14);
+
+       var doc = 0, html = 0, body = 0, main = 0, ap = 0;
+
+       jQuery(document).bind("click", function(e){ if ( e.target !== document) { doc++; } });
+       jQuery("html").bind("click", function(e){ html++; });
+       jQuery("body").bind("click", function(e){ body++; });
+       jQuery("#main").bind("click", function(e){ main++; });
+       jQuery("#ap").bind("click", function(){ ap++; return false; });
+
+       jQuery("html").trigger("click");
+       equals( doc, 1, "HTML bubble" );
+       equals( html, 1, "HTML bubble" );
+
+       jQuery("body").trigger("click");
+       equals( doc, 2, "Body bubble" );
+       equals( html, 2, "Body bubble" );
+       equals( body, 1, "Body bubble" );
+
+       jQuery("#main").trigger("click");
+       equals( doc, 3, "Main bubble" );
+       equals( html, 3, "Main bubble" );
+       equals( body, 2, "Main bubble" );
+       equals( main, 1, "Main bubble" );
+
+       jQuery("#ap").trigger("click");
+       equals( doc, 3, "ap bubble" );
+       equals( html, 3, "ap bubble" );
+       equals( body, 2, "ap bubble" );
+       equals( main, 1, "ap bubble" );
+       equals( ap, 1, "ap bubble" );
 });
 
-test("trigger(event, [data], [fn])", function() {
-       expect(67);
+test("trigger(type, [data], [fn])", function() {
+       expect(11);
 
        var handler = function(event, a, b, c) {
                equals( event.type, "click", "check passed data" );
@@ -246,87 +309,112 @@ test("trigger(event, [data], [fn])", function() {
                return "test";
        };
 
-       var handler2 = function(a, b, c) {
-               equals( a, 1, "check passed data" );
-               equals( b, "2", "check passed data" );
-               equals( c, "abc", "check passed data" );
-               return false;
-       };
-
-       var handler3 = function(a, b, c, v) {
-               equals( a, 1, "check passed data" );
-               equals( b, "2", "check passed data" );
-               equals( c, "abc", "check passed data" );
-               equals( v, "test", "check current value" );
-               return "newVal";
-       };
-
-       var handler4 = function(a, b, c, v) {
-               equals( a, 1, "check passed data" );
-               equals( b, "2", "check passed data" );
-               equals( c, "abc", "check passed data" );
-               equals( v, "test", "check current value" );
-       };
+       var $elem = jQuery("#firstp");
 
        // Simulate a "native" click
-       jQuery("#firstp")[0].click = function(){
+       $elem[0].click = function(){
                ok( true, "Native call was triggered" );
        };
 
        // Triggers handlrs and native
        // Trigger 5
-       jQuery("#firstp").bind("click", handler).trigger("click", [1, "2", "abc"]);
-
-       // Triggers handlers, native, and extra fn
-       // Triggers 9
-       jQuery("#firstp").trigger("click", [1, "2", "abc"], handler4);
+       $elem.bind("click", handler).trigger("click", [1, "2", "abc"]);
 
        // Simulate a "native" click
-       jQuery("#firstp")[0].click = function(){
+       $elem[0].click = function(){
                ok( false, "Native call was triggered" );
        };
 
-       // Triggers handlers, native, and extra fn
-       // Triggers 7
-       jQuery("#firstp").trigger("click", [1, "2", "abc"], handler2);
-
        // Trigger only the handlers (no native)
        // Triggers 5
-       equals( jQuery("#firstp").triggerHandler("click", [1, "2", "abc"]), "test", "Verify handler response" );
-
-       // Trigger only the handlers (no native) and extra fn
-       // Triggers 8
-       equals( jQuery("#firstp").triggerHandler("click", [1, "2", "abc"], handler2), false, "Verify handler response" );
-
-       // Build fake click event to pass in
-       var eventObj = jQuery.event.fix({ type: "foo", target: document.body });
-
-       // Trigger only the handlers (no native), with external event obj
-       // Triggers 5
-       equals( jQuery("#firstp").triggerHandler("click", [eventObj, 1, "2", "abc"]), "test", "Verify handler response" );
+       equals( $elem.triggerHandler("click", [1, "2", "abc"]), "test", "Verify handler response" );
 
-       // Trigger only the handlers (no native) and extra fn, with external event obj
-       // Triggers 9
-       eventObj = jQuery.event.fix({ type: "foo", target: document.body });
-       equals( jQuery("#firstp").triggerHandler("click", [eventObj, 1, "2", "abc"], handler), "test", "Verify handler response" );
-       
        var pass = true;
        try {
-               jQuery('#form input:first')
-                       .hide()
-                       .trigger('focus');
+               jQuery('#form input:first').hide().trigger('focus');
        } catch(e) {
                pass = false;
        }
        ok( pass, "Trigger focus on hidden element" );
+});
 
-       // have the extra handler override the return
-       // Triggers 9
-       equals( jQuery("#firstp").triggerHandler("click", [1, "2", "abc"], handler3), "newVal", "Verify triggerHandler return is overwritten by extra function" );
+test("trigger(eventObject, [data], [fn])", function() {
+       expect(25);
+       
+       var $parent = jQuery('<div id="par" />').hide().appendTo('body'),
+               $child = jQuery('<p id="child">foo</p>').appendTo( $parent );
+       
+       var event = jQuery.Event("noNew");      
+       ok( event != window, "Instantiate jQuery.Event without the 'new' keyword" );
+       equals( event.type, "noNew", "Verify its type" );
+       
+       equals( event.isDefaultPrevented(), false, "Verify isDefaultPrevented" );
+       equals( event.isPropagationStopped(), false, "Verify isPropagationStopped" );
+       equals( event.isImmediatePropagationStopped(), false, "Verify isImmediatePropagationStopped" );
+       
+       event.preventDefault();
+       equals( event.isDefaultPrevented(), true, "Verify isDefaultPrevented" );
+       event.stopPropagation();
+       equals( event.isPropagationStopped(), true, "Verify isPropagationStopped" );
+       
+       event.isPropagationStopped = function(){ return false };
+       event.stopImmediatePropagation();
+       equals( event.isPropagationStopped(), true, "Verify isPropagationStopped" );
+       equals( event.isImmediatePropagationStopped(), true, "Verify isPropagationStopped" );
+       
+       $parent.bind('foo',function(e){
+               // Tries bubbling
+               equals( e.type, 'foo', 'Verify event type when passed passing an event object' );
+               equals( e.target.id, 'child', 'Verify event.target when passed passing an event object' );
+               equals( e.currentTarget.id, 'par', 'Verify event.target when passed passing an event object' );
+               equals( e.secret, 'boo!', 'Verify event object\'s custom attribute when passed passing an event object' );
+       });
+       
+       // test with an event object
+       event = new jQuery.Event("foo");
+       event.secret = 'boo!';
+       $child.trigger(event);
+       
+       // test with a literal object
+       $child.trigger({type:'foo', secret:'boo!'});
+       
+       $parent.unbind();
 
-       // have the extra handler leave the return value alone
-       // Triggers 9
-       equals( jQuery("#firstp").triggerHandler("click", [1, "2", "abc"], handler4), "test", "Verify triggerHandler return is not overwritten by extra function" );
+       function error(){
+               ok( false, "This assertion shouldn't be reached");
+       }
+       
+       $parent.bind('foo', error );
+       
+       $child.bind('foo',function(e, a, b, c ){
+               equals( arguments.length, 4, "Check arguments length");
+               equals( a, 1, "Check first custom argument");
+               equals( b, 2, "Check second custom argument");
+               equals( c, 3, "Check third custom argument");
+               
+               equals( e.isDefaultPrevented(), false, "Verify isDefaultPrevented" );
+               equals( e.isPropagationStopped(), false, "Verify isPropagationStopped" );
+               equals( e.isImmediatePropagationStopped(), false, "Verify isImmediatePropagationStopped" );
+               
+               // Skips both errors
+               e.stopImmediatePropagation();
+               
+               return "result";
+       });
+       
+       // We should add this back in when we want to test the order
+       // in which event handlers are iterated.
+       //$child.bind('foo', error );
+       
+       event = new jQuery.Event("foo");
+       $child.trigger( event, [1,2,3] ).unbind();
+       equals( event.result, "result", "Check event.result attribute");
+       
+       // Will error if it bubbles
+       $child.triggerHandler('foo');
+       
+       $child.unbind();
+       $parent.unbind().remove();
 });
 
 test("toggle(Function, Function, ...)", function() {
@@ -384,6 +472,147 @@ test("toggle(Function, Function, ...)", function() {
        var data = jQuery.data( $div[0], 'events' );
        ok( !data, "Unbinding one function from toggle unbinds them all");
 });
+
+test(".live()/.die()", function() {
+       expect(42);
+
+       var submit = 0, div = 0, livea = 0, liveb = 0;
+
+       jQuery("div").live("submit", function(){ submit++; return false; });
+       jQuery("div").live("click", function(){ div++; });
+       jQuery("div#nothiddendiv").live("click", function(){ livea++; });
+       jQuery("div#nothiddendivchild").live("click", function(){ liveb++; });
+
+       // Nothing should trigger on the body
+       jQuery("body").trigger("click");
+       equals( submit, 0, "Click on body" );
+       equals( div, 0, "Click on body" );
+       equals( livea, 0, "Click on body" );
+       equals( liveb, 0, "Click on body" );
+
+       // This should trigger two events
+       jQuery("div#nothiddendiv").trigger("click");
+       equals( submit, 0, "Click on div" );
+       equals( div, 1, "Click on div" );
+       equals( livea, 1, "Click on div" );
+       equals( liveb, 0, "Click on div" );
+
+       // This should trigger three events (w/ bubbling)
+       jQuery("div#nothiddendivchild").trigger("click");
+       equals( submit, 0, "Click on inner div" );
+       equals( div, 2, "Click on inner div" );
+       equals( livea, 2, "Click on inner div" );
+       equals( liveb, 1, "Click on inner div" );
+
+       // This should trigger one submit
+       jQuery("div#nothiddendivchild").trigger("submit");
+       equals( submit, 1, "Submit on div" );
+       equals( div, 2, "Submit on div" );
+       equals( livea, 2, "Submit on div" );
+       equals( liveb, 1, "Submit on div" );
+
+       // Make sure no other events were removed in the process
+       jQuery("div#nothiddendivchild").trigger("click");
+       equals( submit, 1, "die Click on inner div" );
+       equals( div, 3, "die Click on inner div" );
+       equals( livea, 3, "die Click on inner div" );
+       equals( liveb, 2, "die Click on inner div" );
+
+       // Now make sure that the removal works
+       jQuery("div#nothiddendivchild").die("click");
+       jQuery("div#nothiddendivchild").trigger("click");
+       equals( submit, 1, "die Click on inner div" );
+       equals( div, 4, "die Click on inner div" );
+       equals( livea, 4, "die Click on inner div" );
+       equals( liveb, 2, "die Click on inner div" );
+
+       // Make sure that the click wasn't removed too early
+       jQuery("div#nothiddendiv").trigger("click");
+       equals( submit, 1, "die Click on inner div" );
+       equals( div, 5, "die Click on inner div" );
+       equals( livea, 5, "die Click on inner div" );
+       equals( liveb, 2, "die Click on inner div" );
+
+       // Make sure that stopPropgation doesn't stop live events
+       jQuery("div#nothiddendivchild").live("click", function(e){ liveb++; e.stopPropagation(); });
+       jQuery("div#nothiddendivchild").trigger("click");
+       equals( submit, 1, "stopPropagation Click on inner div" );
+       equals( div, 6, "stopPropagation Click on inner div" );
+       equals( livea, 6, "stopPropagation Click on inner div" );
+       equals( liveb, 3, "stopPropagation Click on inner div" );
+
+       jQuery("div#nothiddendivchild").die("click");
+       jQuery("div#nothiddendiv").die("click");
+       jQuery("div").die("click");
+       jQuery("div").die("submit");
+
+       // Verify that return false prevents default action
+       jQuery("#anchor2").live("click", function(){ return false; });
+       var hash = window.location.hash;
+       jQuery("#anchor2").trigger("click");
+       equals( window.location.hash, hash, "return false worked" );
+       jQuery("#anchor2").die("click");
+
+       // Verify that .preventDefault() prevents default action
+       jQuery("#anchor2").live("click", function(e){ e.preventDefault(); });
+       var hash = window.location.hash;
+       jQuery("#anchor2").trigger("click");
+       equals( window.location.hash, hash, "e.preventDefault() worked" );
+       jQuery("#anchor2").die("click");
+
+       // Test binding the same handler to multiple points
+       var called = 0;
+       function callback(){ called++; return false; }
+
+       jQuery("#nothiddendiv").live("click", callback);
+       jQuery("#anchor2").live("click", callback);
+
+       jQuery("#nothiddendiv").trigger("click");
+       equals( called, 1, "Verify that only one click occurred." );
+
+       jQuery("#anchor2").trigger("click");
+       equals( called, 2, "Verify that only one click occurred." );
+
+       // Make sure that only one callback is removed
+       jQuery("#anchor2").die("click", callback);
+
+       jQuery("#nothiddendiv").trigger("click");
+       equals( called, 3, "Verify that only one click occurred." );
+
+       jQuery("#anchor2").trigger("click");
+       equals( called, 3, "Verify that no click occurred." );
+
+       // Make sure that it still works if the selector is the same,
+       // but the event type is different
+       jQuery("#nothiddendiv").live("foo", callback);
+
+       // Cleanup
+       jQuery("#nothiddendiv").die("click", callback);
+
+       jQuery("#nothiddendiv").trigger("click");
+       equals( called, 3, "Verify that no click occurred." );
+
+       jQuery("#nothiddendiv").trigger("foo");
+       equals( called, 4, "Verify that one foo occurred." );
+
+       // Cleanup
+       jQuery("#nothiddendiv").die("foo", callback);
+       
+       // Make sure we don't loose the target by DOM modifications
+       // after the bubble already reached the liveHandler
+       var livec = 0, elemDiv = jQuery("#nothiddendivchild").html('<span></span>').get(0);
+       
+       jQuery("#nothiddendivchild").live("click", function(e){ jQuery("#nothiddendivchild").html(''); });
+       jQuery("#nothiddendivchild").live("click", function(e){ if(e.target) {livec++;} });
+       
+       jQuery("#nothiddendiv span").click();
+       equals( jQuery("#nothiddendiv span").length, 0, "Verify that first handler occurred and modified the DOM." );
+       equals( livec, 1, "Verify that second handler occurred even with nuked target." );
+       
+       // Cleanup
+       jQuery("#nothiddendivchild").die("click");
+});
+
 /*
 test("jQuery(function($) {})", function() {
        stop();
@@ -400,4 +629,4 @@ test("event properties", function() {
                start();
        }).click();
 });
-*/
\ No newline at end of file
+*/