jQuery onで複数のイベントリスナを登録

01. onメソッド

・onメソッドとは

02. サンプル

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

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

onメソッドとは

1つの要素に複数のイベントリスナを登録できます。
以下はjQueryサイトのonメソッドのページです。
http://api.jquery.com/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.4.1/jquery.min.js"></script>
<script>

	$("#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.4.1/jquery.min.js"></script>
<script>

	$("#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行目は、イベントごとに処理が記述されています。