jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

jQueryの1つの要素に複数のイベントリスナを登録するサンプルです。
onメソッドを使用します。

pタグに複数のイベントリスナを登録するサンプル
テキストボックスに複数のイベントリスナを登録するサンプル
onメソッド

pタグに複数のイベントリスナを登録するサンプル

水色の四角(pタグ)に次の操作をするとイベント名が表示されるサンプルです。
・カーソルを入れる→mouseenter
・カーソルを外す→mouseleave
・クリックする→click
・ダブルクリックする→dblclick

カーソル当てて下さい

イベント名：

コード

上記コードのサンプルです。

<style>
#p1{height:50px;width:200px;border:1px solid #000;
background-color:LightCyan;margin:10px 0px;}
</style>

<p id="p1">カーソル当てて下さい</p></div>
<p>イベント名：<span id="span1"></span></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
	$("#p1").on({
		"mouseenter":function(e){
			$("#span1").text("mouseenter");
		},
		"mouseleave":function(e){
			$("#span1").text("mouseleave");
		},
		"dblclick":function(e){
			$("#span1").text("dblclick");
		},
		"click":function(e){
			$("#span1").text("click");
		}
	});
});
</script>

12行目は、onメソッドです。
13-24行目は、イベントごとに処理が記述されています。

テキストボックスに複数のイベントリスナを登録するサンプル

テキストボックスに次の操作をするとイベント名が表示されるサンプルです。
・テキストボックス内にカーソルを当てる→focus
・カーソルを外して任意の箇所をクリックする→blur
・値を変更してテキストボックス内でエンターキーを押す→change

イベント名：

コード

上記コードのサンプルです。

<input type="text" id="textbox1" value="100" maxlength="6">
<p>イベント名：<span id="span2"></span></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
	$("#textbox1").on({
		"focus":function(e){
			$("#span2").text("focus");
		},
		"blur":function(e){
			$("#span2").text("blur");
		},
		"change":function(e){
			$("#span2").text("change");
		}
	});
});
</script>

7行目は、onメソッドです。
8-16行目は、イベントごとに処理が記述されています。

onメソッド

jQueryのonメソッドです。
1つの要素に複数のイベントリスナを登録できます。
以下はjQueryサイトのonメソッドのページです。
http://api.jquery.com/on/