Permalink
Browse files

Widget: Added _off() for removing event handlers. Fixes #7795 - Widge…

…t: _on and _off.
  • Loading branch information...
1 parent 00d4beb commit ff39bed57a05ca060033187b8aecebafab357f78 @scottgonzalez scottgonzalez committed Jun 14, 2012
@@ -767,6 +767,83 @@ test( "_on() to common element", function() {
$( document ).trigger( "customevent" );
});
+test( "_off() - single event", function() {
+ expect( 3 );
+
+ $.widget( "ui.testWidget", {} );
+ var shouldTriggerWidget, shouldTriggerOther,
+ element = $( "#widget" ),
+ widget = element.testWidget().data( "testWidget" );
+ widget._on( element, { foo: function() {
+ ok( shouldTriggerWidget, "foo called from _on" );
+ }});
+ element.bind( "foo", function() {
+ ok( shouldTriggerOther, "foo called from bind" );
+ });
+ shouldTriggerWidget = true;
+ shouldTriggerOther = true;
+ element.trigger( "foo" );
+ shouldTriggerWidget = false;
+ widget._off( element, "foo" );
+ element.trigger( "foo" );
+});
+
+test( "_off() - multiple events", function() {
+ expect( 6 );
+
+ $.widget( "ui.testWidget", {} );
+ var shouldTriggerWidget, shouldTriggerOther,
+ element = $( "#widget" ),
+ widget = element.testWidget().data( "testWidget" );
+ widget._on( element, {
+ foo: function() {
+ ok( shouldTriggerWidget, "foo called from _on" );
+ },
+ bar: function() {
+ ok( shouldTriggerWidget, "bar called from _on" );
+ }
+ });
+ element.bind( "foo bar", function( event ) {
+ ok( shouldTriggerOther, event.type + " called from bind" );
+ });
+ shouldTriggerWidget = true;
+ shouldTriggerOther = true;
+ element.trigger( "foo" );
+ element.trigger( "bar" );
+ shouldTriggerWidget = false;
+ widget._off( element, "foo bar" );
+ element.trigger( "foo" );
+ element.trigger( "bar" );
+});
+
+test( "_off() - all events", function() {
+ expect( 6 );
+
+ $.widget( "ui.testWidget", {} );
+ var shouldTriggerWidget, shouldTriggerOther,
+ element = $( "#widget" ),
+ widget = element.testWidget().data( "testWidget" );
+ widget._on( element, {
+ foo: function() {
+ ok( shouldTriggerWidget, "foo called from _on" );
+ },
+ bar: function() {
+ ok( shouldTriggerWidget, "bar called from _on" );
+ }
+ });
+ element.bind( "foo bar", function( event ) {
+ ok( shouldTriggerOther, event.type + " called from bind" );
+ });
+ shouldTriggerWidget = true;
+ shouldTriggerOther = true;
+ element.trigger( "foo" );
+ element.trigger( "bar" );
+ shouldTriggerWidget = false;
+ widget._off( element );
+ element.trigger( "foo" );
+ element.trigger( "bar" );
+});
+
test( "._hoverable()", function() {
$.widget( "ui.testWidget", {
_create: function() {
@@ -219,8 +219,7 @@ $.widget( "ui.accordion", {
if ( key === "event" ) {
if ( this.options.event ) {
- this.headers.unbind(
- this.options.event.split( " " ).join( ".accordion " ) + ".accordion" );
+ this._off( this.headers, this.options.event );
}
this._setupEvents( value );
}
View
@@ -54,8 +54,8 @@ $.widget( "ui.button", {
},
_create: function() {
this.element.closest( "form" )
- .unbind( "reset.button" )
- .bind( "reset.button", formResetHandler );
+ .unbind( "reset" + this.eventNamespace )
+ .bind( "reset" + this.eventNamespace, formResetHandler );
if ( typeof this.options.disabled !== "boolean" ) {
this.options.disabled = !!this.element.prop( "disabled" );
@@ -79,7 +79,7 @@ $.widget( "ui.button", {
this.buttonElement
.addClass( baseClasses )
.attr( "role", "button" )
- .bind( "mouseenter.button", function() {
+ .bind( "mouseenter" + this.eventNamespace, function() {
if ( options.disabled ) {
return;
}
@@ -88,30 +88,30 @@ $.widget( "ui.button", {
$( this ).addClass( "ui-state-active" );
}
})
- .bind( "mouseleave.button", function() {
+ .bind( "mouseleave" + this.eventNamespace, function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( hoverClass );
})
- .bind( "click.button", function( event ) {
+ .bind( "click" + this.eventNamespace, function( event ) {
if ( options.disabled ) {
event.preventDefault();
event.stopImmediatePropagation();
}
});
this.element
- .bind( "focus.button", function() {
+ .bind( "focus" + this.eventNamespace, function() {
// no need to check disabled, focus won't be triggered anyway
that.buttonElement.addClass( focusClass );
})
- .bind( "blur.button", function() {
+ .bind( "blur" + this.eventNamespace, function() {
that.buttonElement.removeClass( focusClass );
});
if ( toggleButton ) {
- this.element.bind( "change.button", function() {
+ this.element.bind( "change" + this.eventNamespace, function() {
if ( clickDragged ) {
return;
}
@@ -121,15 +121,15 @@ $.widget( "ui.button", {
// prevents issue where button state changes but checkbox/radio checked state
// does not in Firefox (see ticket #6970)
this.buttonElement
- .bind( "mousedown.button", function( event ) {
+ .bind( "mousedown" + this.eventNamespace, function( event ) {
if ( options.disabled ) {
return;
}
clickDragged = false;
startXPos = event.pageX;
startYPos = event.pageY;
})
- .bind( "mouseup.button", function( event ) {
+ .bind( "mouseup" + this.eventNamespace, function( event ) {
if ( options.disabled ) {
return;
}
@@ -140,15 +140,15 @@ $.widget( "ui.button", {
}
if ( this.type === "checkbox" ) {
- this.buttonElement.bind( "click.button", function() {
+ this.buttonElement.bind( "click" + this.eventNamespace, function() {
if ( options.disabled || clickDragged ) {
return false;
}
$( this ).toggleClass( "ui-state-active" );
that.buttonElement.attr( "aria-pressed", that.element[0].checked );
});
} else if ( this.type === "radio" ) {
- this.buttonElement.bind( "click.button", function() {
+ this.buttonElement.bind( "click" + this.eventNamespace, function() {
if ( options.disabled || clickDragged ) {
return false;
}
@@ -166,7 +166,7 @@ $.widget( "ui.button", {
});
} else {
this.buttonElement
- .bind( "mousedown.button", function() {
+ .bind( "mousedown" + this.eventNamespace, function() {
if ( options.disabled ) {
return false;
}
@@ -176,21 +176,21 @@ $.widget( "ui.button", {
lastActive = null;
});
})
- .bind( "mouseup.button", function() {
+ .bind( "mouseup" + this.eventNamespace, function() {
if ( options.disabled ) {
return false;
}
$( this ).removeClass( "ui-state-active" );
})
- .bind( "keydown.button", function(event) {
+ .bind( "keydown" + this.eventNamespace, function(event) {
if ( options.disabled ) {
return false;
}
if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
$( this ).addClass( "ui-state-active" );
}
})
- .bind( "keyup.button", function() {
+ .bind( "keyup" + this.eventNamespace, function() {
$( this ).removeClass( "ui-state-active" );
});
View
@@ -224,7 +224,7 @@ $.widget("ui.dialog", {
if ( this.overlay ) {
this.overlay.destroy();
}
- this.uiDialog.unbind( "keypress.ui-dialog" );
+ this._off( this.uiDialog, "keypress" );
if ( this.options.hide ) {
this.uiDialog.hide( this.options.hide, function() {
@@ -310,7 +310,7 @@ $.widget("ui.dialog", {
// prevent tabbing out of modal dialogs
if ( options.modal ) {
- uiDialog.bind( "keydown.ui-dialog", function( event ) {
+ this._on( uiDialog, { keydown: function( event ) {
if ( event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
@@ -326,7 +326,7 @@ $.widget("ui.dialog", {
last.focus( 1 );
return false;
}
- });
+ }});
}
// set focus to the first tabbable element in the content area or the first button
View
@@ -44,7 +44,7 @@ $.widget( "ui.menu", {
})
// need to catch all clicks on disabled menu
// not possible through _on
- .bind( "click.menu", $.proxy(function( event ) {
+ .bind( "click" + this.eventNamespace, $.proxy(function( event ) {
if ( this.options.disabled ) {
event.preventDefault();
}
@@ -168,7 +168,7 @@ $.widget( "ui.menu", {
this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" );
// unbind currentEventTarget click event handler
- $( currentEventTarget ).unbind( "click.menu" );
+ this._off( $( currentEventTarget ), "click" );
},
_keydown: function( event ) {
View
@@ -58,7 +58,7 @@ $.widget( "ui.tabs", {
.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" )
.toggleClass( "ui-tabs-collapsible", options.collapsible )
// Prevent users from focusing disabled tabs via click
- .delegate( ".ui-tabs-nav > li", "mousedown.tabs", function( event ) {
+ .delegate( ".ui-tabs-nav > li", "mousedown" + this.eventNamespace, function( event ) {
if ( $( this ).is( ".ui-state-disabled" ) ) {
event.preventDefault();
}
@@ -69,7 +69,7 @@ $.widget( "ui.tabs", {
// We don't have to worry about focusing the previously focused
// element since clicking on a non-focusable element should focus
// the body anyway.
- .delegate( ".ui-tabs-anchor", "focus.tabs", function() {
+ .delegate( ".ui-tabs-anchor", "focus" + this.eventNamespace, function() {
if ( $( this ).closest( "li" ).is( ".ui-state-disabled" ) ) {
this.blur();
}
@@ -480,7 +480,7 @@ $.widget( "ui.tabs", {
});
}
- this.anchors.add( this.tabs ).add( this.panels ).unbind( ".tabs" );
+ this._off( this.anchors.add( this.tabs ).add( this.panels ) );
this._on( this.anchors, events );
this._on( this.tabs, { keydown: "_tabKeydown" } );
this._on( this.panels, { keydown: "_panelKeydown" } );
View
@@ -233,7 +233,7 @@ $.widget( "ui.tooltip", {
});
target.removeData( "tooltip-open" );
- target.unbind( "mouseleave.tooltip focusout.tooltip keyup.tooltip" );
+ this._off( target, "mouseleave focusout keyup" );
this.closing = true;
this._trigger( "close", event, { tooltip: tooltip } );
View
@@ -387,6 +387,11 @@ $.Widget.prototype = {
});
},
+ _off: function( element, eventName ) {
+ eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) + this.eventNamespace;
+ element.unbind( eventName ).undelegate( eventName );
+ },
+
_delay: function( handler, delay ) {
function handlerProxy() {
return ( typeof handler === "string" ? instance[ handler ] : handler )

0 comments on commit ff39bed

Please sign in to comment.