jQueryのonメソッドでhoverを使う

ウェブ制作技術

おはようございます、ヒグチです。
年末なので浮き足立っています。

このあいだ、会社の忘年会でおいしいものをいただいたあと、
駅前の居酒屋でさらに飲酒し、
最終的にスナックにて昭和歌謡を唄い舞いおどる、それはたのしい一夜を過ごしました。

こんな日が永遠に続けばいいのに、と思います。

今日は、ウェブ制作のTipsを紹介します。

jQueryのonメソッドで、hoverを使う方法です。

コーディングTIPS

jQueryのon()メソッド

jQueryのonメソッドは、イベントを設定するときに使う、便利な機能です。
jQueryのバージョン1.7から登場した on() は、それまでのbind()、live()、delegate()などの機能を統合したものです。

例えばこんなふうに書きます。

第一引数にイベント、第二引数に関数をとります。
以前のbind()に相当します。

プログラミング

また、次のような書き方もできます。

主語が $(document) になっていて、また、第二引数にイベントを設定するセレクタをとります。
こう書くと、後から動的に追加された要素に対しても、イベントを設定できます。

「後から動的に追加」というのは、例えば、クリックなどで表示されたり、onload後にajaxで読み込んできたり、というようなことです。

jQueryのhover()メソッド

jQueryのhoverメソッドも、これまた便利な機能です。
mouseenterとmouseleaveのイベントを、一発で指定できます。
マウスがのった時と、離れた時ですね。

例えばこんなふうに書きます。

on()でhover()を使う

ここからが本題です。

on()のイベントにhover()を設定したいときは、どうすればいいか、という話です。

結論としては、
mouseenterとmouseleaveにそれぞれ指定してあげる形になります。

プログラミング

ではコードを見てみましょう。

まずはbind()機能を持つもの(ふつうにイベント設定するもの)。

これは、on()で複数イベントを設定するときの書き方です。

要するに、mouseennterとmouseleaveのイベントを同時に設定しているだけです。

プログラミング

つぎに、live()機能をもつもの(あとから動的に追加された要素にもイベントを設定可能)。

最後の引数に、ターゲットの要素を指定しているところがポイントです。


以上、かゆいところに手が届きそうなTipsを紹介いたしました。
みなさんのかゆいところにも手が届いたらいいなと思います。
それではよいお年を。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。