THE HAM MEDIA BLOG

jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()（.bind()）で使うのはどうやるんだろう？とかわかるようでわからなかったので、ちょっと調べてみた。

.hover()を利用してみる

とりあえず、.hover()の使い方からおさらいしてみたいと思います。

.hover()メソッドは、マウスを乗せた時とはずした時の２つの処理を入れておくことで、実現できます。

$('#demo1 p').hover(function(){
    $(this).fadeTo('fast',.3);
},function(){
    $(this).fadeTo('fast',1);
});

マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。

以前は乗せた時とはずした時の２つの処理を入れておかなければエラーだったのですが、現在は一つだけでもあればエラーなしに、乗せた時のみの動作をするようになっています。

それは、以前と現在では、.hover()のエイリアスに変更があったためです。

以前の.hover()は.mouseenter().mouseleave()のエイリアス

以前の.hover()で２つの処理を入れておかなければエラーになっていたのは、.mouseenter()と.mouseleave()の２つのメソッドを含んでいたためです。

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

.hover() - jQuery API

つまり先ほどの.hover()を、.mouseenter()と.mouseleave()に分けて書くと、下記の様になります。

$('#demo2 p').mouseenter(function(){
    $(this).fadeTo('fast',.3);
}).mouseleave(function(){
    $(this).fadeTo('fast',1);
});

こっちのほうが、ぱっと見た時の処理はわかりやすいかもしれません。

それと、いまさらな注意ですが、.hover()は.mouseenter()と.mouseleave()のエイリアスであって、.mouseover()と.mouseout()とは動作が違うので要注意です。

.hover()の現在のエイリアス

以前までのエイリアスは、先程確認したとおりですが、現在はmouseenterとmouseleaveのイベントがbindでまとめられたイベントのエイリアスに変更されています。

Calling $(selector).hover(handlerInOut) is shorthand for::

$(selector).bind("mouseenter mouseleave", handlerInOut);

.hover() - jQuery API

jQuery1.4以降のバージョンから、上記の様になったようです。このため、２つの機能がなくても動作するようになったようです。

.hover()を.bind()で書き換えてみる

では、.hover()を.bind()を使って、書き換えてみたいと思います。

jQuery1.4以降は、bindでマルチイベントに対応しているので、その書き方を使います。

$('#demo3 p').bind({
    'mouseenter':function(){
        $(this).fadeTo('fast',.3);
    },
    'mouseleave':function(){
        $(this).fadeTo('fast',1);
    }
});

ちなみに、ここまでにエイリアスの話を挟んできたので、不要かと思ったのですが念のために・・・.bind()ではhoverというイベントは使えません（現在は無いのです）。

toggle系のイベントならまとめて書ける

$('◯◯').bind('mouseenter mouseleave',function(){
    $(this).toggleClass('active');
});

上記の様に書けるようなので、じゃあ、.toggle()でイベント作って中に入れたらいいじゃーんって思ってやってみたのですが、残念ながら動作せず。

■下記は動作しません

$('◯◯').bind('mouseenter mouseleave',function(){
    $(this).toggle(function(){
        //省略
    },function(){
        //省略
    });
});

動くように思ったのですが、動かず。

ちなみに、表示非表示の切り替えのtoggleは動作します。

$('◯◯').bind('mouseenter mouseleave',function(){
    $(this).toggle('fast');
});

.bind()を.on()に置き換える

jQuery 1.7 より、.bind()、.live()、.delegate()が.on()に統合されています。今回の.bind()も.on()にできるので、そのまま置き換えてみます。

$('#demo4 p').on({
    'mouseenter':function(){
        $(this).fadeTo('fast',.3);
    },
    'mouseleave':function(){
    $(this).fadeTo('fast',1);
    }
});

これで目的の.hover()を.on()で使えるようにしてみました。

hoverはmouseenterとmouseleaveのエイリアスというのは知っていたのですが、bindでhoverの機能を付けたい時にちょっと疑問になったので、今回のエントリーを書いてみました。