jQueryのon()で複数のイベントを設定する

jQueryのon()でhover()を使いたいことがたまにあるので、実装方法をメモしておきます。

サンプルコード

hover()はmouseenterイベントとmouseleaveイベントで設定します。

HTML

<a href="" class="hover-element">consoleに結果を表示します。</a>

同一の要素に複数のイベントを設定したい場合、以下のように設定します。

JavaScript

$(function() {
	$('.hover-element').on({
		mouseenter: function() {
			console.log('mouseenter');
		}, mouseleave: function() {
			console.log('mouseleave');
		}
	});
});

mouseenterとmouseleaveのデモページ
　

【参考サイト】

• .on() | jQuery API Documentation
• .hover() | jQuery API Documentation