JavaScript: DRY mouseover/mouseout event handlers

Question

This is my code:

    $rows
        .on('mouseover', '.row', function () {
            $(this).find('.label').show();
        })
        .on('mouseout', '.row', function () {
            $(this).find('.label').hide();
        });

Can it be DRYed out?

Answer 1

You can bind both events, listen to event.name and then use jQuery.fn.toggle

$userRows.on('mouseover mouseout', '.row', function(event) {
    $(this).find(".label").toggle( event.name == "mouseover" );
});

Im pretty sure you can also use jQuery.fn.hover :

$userRows.on('hover', '.row', function(event) {
    $(this).find(".label").toggle( event.name == "mouseenter" );
});

or even:

$userRows.on('hover', '.row', function(event) {
    $(this).find(".label").toggle();
});

Answer 2

What about:

$rows.hover( function(){ $(this).find('.label').toggle(); }, function(){ $(this).find('.label').toggle(); } );