jQueryでhoverとclickのfunctionを1つにまとめるには? ITかあさん

ITかあさん

jQueryでhoverとclickのfunctionを1つにまとめるには?

hoverとclick それぞれ2つの同じ処理のfunctionがあったとします。
これをコンパクトに1つにまとめる方法を紹介します。

click

$('#target').click(function() {
alert('foo');
});

hover

$('#target').hover(function() {
alert('foo');
});

こんな風に、マウスイベントはそれぞれ違うんだけれど、実行する処理は同じ場合、よりコンパクトにさせたいですよね。
やり方やいたってシンプル。

var hoverOrClick = function () {
alert('test');
}
$('#target').click(hoverOrClick).hover(hoverOrClick);

または、bindを使って合体も可能です。

$('#target').bind('click hover', function () {
alert('test');
});

今回はhoverと、clickの場合のみでしたが、あらゆるイベントを合体してあげることも可能ですね。

初夏のJavaScript祭 in サーキュレーションビル ForPro