From 334cb78217222f33a20f90e2074f7e2b4bc8de8b Mon Sep 17 00:00:00 2001 From: Dave Methvin Date: Sun, 4 Dec 2016 22:06:42 -0500 Subject: [PATCH 1/2] Event: Warn and fill event aliases Fixes #230 --- src/event.js | 18 ++++++++++++++++++ test/event.js | 31 +++++++++++++++++++++++++++++++ warnings.md | 12 ++++++++++++ 3 files changed, 61 insertions(+) diff --git a/src/event.js b/src/event.js index bad5565e..43f744b6 100644 --- a/src/event.js +++ b/src/event.js @@ -75,6 +75,20 @@ jQuery.each( [ "load", "unload", "error" ], function( _, name ) { } ); +jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " + + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + + "change select submit keydown keypress keyup contextmenu" ).split( " " ), + function( i, name ) { + + // Handle event binding + jQuery.fn[ name ] = function( data, fn ) { + migrateWarn( "jQuery.fn." + name + "() event shorthand is deprecated" ); + return arguments.length > 0 ? + this.on( name, null, data, fn ) : + this.trigger( name ); + }; +} ); + // Trigger "ready" event only once, on document ready jQuery( function() { jQuery( window.document ).triggerHandler( "ready" ); @@ -107,5 +121,9 @@ jQuery.fn.extend( { return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); + }, + hover: function( fnOver, fnOut ) { + migrateWarn( "jQuery.fn.hover() is deprecated" ); + return this.on( "mouseenter", fnOver ).on( "mouseleave", fnOut || fnOver ); } } ); diff --git a/test/event.js b/test/event.js index 9b50c34c..ebfff4a2 100644 --- a/test/event.js +++ b/test/event.js @@ -94,6 +94,37 @@ QUnit.test( ".delegate() and .undelegate()", function( assert ) { } ); } ); +QUnit.test( "Event aliases", function( assert) { + assert.expect( 16 ); + + var $div = jQuery( "
" ); + + "scroll click submit keydown".split( " " ).forEach( function( name ) { + expectWarning( "." + name + "()", 1, function() { + $div[ name ]( function( event ) { + assert.equal( event.type, name, name) + } )[ name ](); + } ); + } ); + + expectWarning( ".hover() one-arg", function() { + $div.hover( function( event ) { + assert.ok( /mouseenter|mouseleave/.test( event.type ), event.type ); + } ).trigger( "mouseenter" ).trigger( "mouseleave" ); + } ); + + expectWarning( ".hover() two-arg", function() { + $div.hover( + function( event ) { + assert.equal( "mouseenter", event.type, event.type ); + }, + function( event ) { + assert.equal( "mouseleave", event.type, event.type ); + } + ).trigger( "mouseenter" ).trigger( "mouseleave" ); + } ); +} ); + test( "custom ready", function( assert ) { assert.expect( 2 ); diff --git a/warnings.md b/warnings.md index 88b2779a..b3c50847 100644 --- a/warnings.md +++ b/warnings.md @@ -199,3 +199,15 @@ See jQuery-ui [commit](https://github.com/jquery/jquery-ui/commit/c0093b599fcd58 **Cause:** The calling code has attempted to attach a `load` event to `window` after the page has already loaded. That means the handler will never run and so is probably not what the caller intended. This can occur when the event attachment is made too late, for example, in a jQuery ready handler. It can also occur when a file is loaded dynamically with jQuery after the page has loaded, for example using the `$.getScript()` method. **Solution:** If a function `fn` does not actually depend on all page assets being fully loaded, switch to a ready handler `$( fn )` which runs earlier and will aways run `fn` even if the script that contains the code loads long after the page has fully loaded. If `fn` actually does depend on the script being fully loaded, check `document.readyState`. If the value is `"complete"` run the function immediately, otherwise use `$(window).on( "load", fn )`. + +### JQMIGRATE: jQuery.fn.click() event shorthand is deprecated + +**Cause:** The `.on()` and `.trigger()` methods can set an event handler or generate an event for any event type, and should be used instead of the shortcut methods. This message also applies to the other event shorthands, including: blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and contextmenu. + +**Solution:** Instead of `.click(fn)` use `.on("click", fn)`. Instead of `.click()` use `.trigger("click")`. + +### JQMIGRATE: jQuery.fn.hover() is deprecated + +**Cause:** The `.hover()` method is a shorthand for the use of the `mouseover`/`mouseout` events. It is often a poor user interface choice because it does not allow for any small amounts of delay between when the mouse enters or exits an area and when the event fires. This can make it quite difficult to use with UI widgets such as drop-down menus. For more information on the problems of hovering, see the [hoverIntent plugin](http://cherne.net/brian/resources/jquery.hoverIntent.html). + +**Solution:** Review uses of `.hover()` to determine if they are appropriate, and consider use of plugins such as `hoverIntent` as an alternative. The direct replacement for `.hover(fn1, fn2)`, is `.on("mouseenter", fn1).on("mouseleave", fn2)`. \ No newline at end of file From 453118d8e5ff5a39d9df2fdcfedc86426d100245 Mon Sep 17 00:00:00 2001 From: Dave Methvin Date: Wed, 25 Jan 2017 22:37:38 -0500 Subject: [PATCH 2/2] squash! Fixes per @mgol review --- test/event.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/test/event.js b/test/event.js index ebfff4a2..9d747059 100644 --- a/test/event.js +++ b/test/event.js @@ -95,25 +95,27 @@ QUnit.test( ".delegate() and .undelegate()", function( assert ) { } ); QUnit.test( "Event aliases", function( assert) { - assert.expect( 16 ); + assert.expect( 14 ); var $div = jQuery( "
" ); "scroll click submit keydown".split( " " ).forEach( function( name ) { expectWarning( "." + name + "()", 1, function() { $div[ name ]( function( event ) { - assert.equal( event.type, name, name) + assert.equal( event.type, name, name ); + $div.off( event ); } )[ name ](); } ); } ); - expectWarning( ".hover() one-arg", function() { + expectWarning( ".hover() one-arg", 1, function() { $div.hover( function( event ) { assert.ok( /mouseenter|mouseleave/.test( event.type ), event.type ); + $div.off( event ); } ).trigger( "mouseenter" ).trigger( "mouseleave" ); } ); - expectWarning( ".hover() two-arg", function() { + expectWarning( ".hover() two-arg", 1, function() { $div.hover( function( event ) { assert.equal( "mouseenter", event.type, event.type );