jQueryの汎用的なonメソッド

イベントをバインドするには、汎用的なメソッド on も使用できます。第一引数にはイベント名（例：'click'）を、第二引数にはバインドする関数を受け取ります。

次のHTMLコードの例を見てみましょう：

<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul>

CSSは次のようになります：

li {
	width: 100px;
	cursor: pointer;
}

では、以前メソッドを使って書いたliのコードを、 onメソッドを使って書き直してみましょう。動作を確認するために、リスト項目をクリックしてみてください：

$('li').on('click', function() {
	$(this).append('!');
});

一つの関数を複数の種類のイベントに同時にバインドすることができます。そのためには、イベントをスペースで区切って列挙します：'click mousemove など'。例えば、次のようにします：

$('li').on('click mousemove', function func() {
	$(this).append('!');
});

すべてのリンクにイベントをバインドしてください。リンクにマウスオーバーすると、リンクテキストの末尾にそのリンクのhrefが丸括弧で追加されるようにします。

すべての入力フィールドにイベントをバインドしてください。フォーカスを失うと、各入力フィールドはそのvalueを id=#testの段落に出力します。