【jQuery】マウスイベントの種類やメソッドの使い方

こちらではjQueryのマウスイベントについて解説しています。

jQueryのマウスイベントに関するメソッド一覧

.click(handler)

.on('click', handler)のショートカットです。

.click( handler )、.click([eventData], handler)の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。

.click(handler)の使い方

<div id="item1">
	ここをクリック
</div>

上記のHTMLにおいて、次のJavaScriptを実行します。

$( "#item1" ).click(function() {
	alert( "イベントハンドラが呼ばれました。" );
})

「ここをクリック」という部分をクリックすると、「イベントハンドラが呼ばれました。」というメッセージがアラートで表示されます。

.click()

.trigger('click')のショートカットです。

.click()の形でイベントをトリガーします。

.click()の使い方

<div id="item1">
	ここをクリック
</div>
<div id="item2">
	ここはクリックしません
</div>

上記のHTMLにおいて、次のJavaScriptを実行します。

$( "#item1" ).click(function() {
	$('#item2').click();
});

$( "#item2" ).click(function() {
	alert('イベントハンドラが呼ばれました');
});

「ここをクリック」という部分をクリックすると、「イベントハンドラが呼ばれました。」というメッセージがアラートで表示されます。

.click(handler)のサンプルと同じメッセージが表示されますが、内部の処理が異なっています。

まず「ここをクリック」という部分をクリックすると、item1にバインドされたイベントハンドラが呼ばれ、item2のクリックをトリガーします。

するとitem2にバインドされたイベントハンドラが呼ばれてメッセージが表示されるようになっています。

.contextmenu(handler)

.on('contextmenu', handler)のショートカットです。

.contextmenu( handler )、.contextmenu([eventData], handler)の形でイベントハンドラをJavaScriptのコンテキストメニューイベントにバインドします。

.contextmenu(handler)の使い方

<div id="item1">
	ここを右クリック
</div>

上記のHTMLにおいて、次のJavaScriptを実行します。

$( "#item1" ).contextmenu(function() {
	alert('コンテキストメニューのハンドラがよばれました。');
});

「ここを右クリック」という部分を右クリックすると、「コンテキストメニューのハンドラがよばれました。」というメッセージがアラートで表示されます。

.contextmenu()

.trigger('contextmenu')のショートカットです。

.contextmenu()の形でイベントをトリガーします。

.contextmenu()の使い方

<div id="item1">
	ここを右クリック
</div>
<div id="item2">
	ここは右クリックしません
</div>

上記のHTMLにおいて、次のJavaScriptを実行します。

$( "#item1" ).contextmenu(function() {
	$('#item2').contextmenu();
});

$( "#item2" ).contextmenu(function() {
	alert('イベントハンドラが呼ばれました');
});

「ここを右クリック」という部分を右クリックすると、「コンテキストメニューのハンドラがよばれました。」というメッセージがアラートで表示されます。

.contextmenu(handler)のサンプルと同じメッセージが表示されますが、内部の処理が異なっています。

まず「ここを右クリック」という部分をクリックすると、item1にバインドされたイベントハンドラが呼ばれ、item2のクリックをトリガーします。

するとitem2にバインドされたイベントハンドラが呼ばれてメッセージが表示されるようになっています。

.dblclick(handler)

.on('dblclick', handler)のショートカットです。

.dblclick( handler )、.dblclick([eventData], handler)の形でイベントハンドラをJavaScriptのダブルクリックイベントにバインドします。

使い方は、バインドするイベントがdblclickになるだけで.click(handler)とほぼ同じです。

.dblclick()

.trigger('dblclick')のショートカットです。

.dblclick()の形でイベントをトリガーします。

使い方は、トリガーするイベントがdblclickになるだけで.trigger('click')とほぼ同じです。

.hover(handlerIn, handlerOut)

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);のショートカットです。

2つのハンドラをmouseenterとmouseleaveのイベントにバインドします。

このメソッドを使うことで、マウスが要素内にあるときだけ動作を適用させることができます。

.hover(handlerIn, handlerOut)の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li>メロン</li>
</ul>

上記のHTMLにおいて、次のJavaScriptを実行します。

$( "li" ).hover(
	function() { $(this).css('color', 'red'); },
	function() { $(this).css('color', 'black'); }
);

すると、リスト要素の上にマウスポインタがあるときは文字が赤色になり、要素から外れると文字が黒色になります。

.mousedown(handler)

.on('mousedown', handler)のショートカットです。

.mousedown( handler )、.mousedown([eventData], handler)の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。

クリックとマウスダウンとの違いは、クリックはマウスを押して離したときに発生しますが、マウスダウンは押した瞬間に発生します。

それ以外の使い方は、バインドするイベントがmousedownになるだけで.click(handler)とほぼ同じです。

.mousedown()

.trigger('mousedown')のショートカットです。

.mousedown()の形でイベントをトリガーします。

使い方は、トリガーするイベントがmousedownになるだけで.trigger(‘click’)とほぼ同じです。

.mouseenter(handler)

.on(‘mouseenter’, handler)のショートカットです。

.mouseenter(handler)、.mouseenter([eventData], handler)の形でイベントハンドラをJavaScriptのマウスエンターイベントにバインドします。

.mouseenter()

.trigger('mouseenter')のショートカットです。

.mouseenter()の形でイベントをトリガーします。

.mouseleave(handler)

.on(‘mouseleave’, handler)のショートカットです。

.mouseleave(handler)、.mouseleave([eventData], handler)の形でイベントハンドラをJavaScriptのマウスリーブイベントにバインドします。

.mouseleave()

.trigger('mouseleave')のショートカットです。

.mouseleave()の形でイベントをトリガーします。

.mousemove(handler)

.on('mousemove', handler)のショートカットです。

.mousemove(handler)、.mousemove([eventData], handler)の形でイベントハンドラをJavaScriptのマウスムーブイベントにバインドします。

mousemoveは、マウスポインタが要素内を動いているときに発生するイベントです。

.mousemove()

.trigger('mousemove')のショートカットです。

.mousemove()の形でマウスムーブイベントをトリガーします。

.mouseout(handler)

.on('mouseout', handler)のショートカットです。

.mouseout( handler )、.mouseout([eventData], handler)の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。

mouseoutは、マウスポインタが要素から出たときに発生するイベントです。

.mouseout()

.trigger('mouseout')のショートカットです。

.mouseout()の形でイベントをトリガーします。

.mouseover(handler)

.on('mouseover', handler)のショートカットです。

.mouseover( handler )、.mouseover([eventData], handler)の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。

mouseoverは、マウスポインタが要素に入ったときに発生するイベントです。

.mouseover()

.trigger('mouseover')のショートカットです。

.mouseover()の形でイベントをトリガーします。

.mouseup(handler)

.on('mouseup', handler)のショートカットです。

.mouseup( handler )、.mouseup([eventData], handler)の形でイベントハンドラをJavaScriptのクリックイベントにバインドします。

mouseupは、マウスボタンが離されたときに発生するイベントです。

.mouseup()

.trigger('mouseup')のショートカットです。

.mouseup()の形でイベントをトリガーします。

.toggle(handler, handler [,handler])

2つ以上のハンドラをマッチした要素にバインドし、クリックの度に実行します。

jQuery 1.9で削除されました。