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

目次

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

関連の記事

jQuery 属性値を取得/設定/削除/画面遷移する(attr)
jQuery textメソッドとhtmlメソッドの違い
Query 繰り返し処理を行うサンプル(each)
jQuery findメソッドで子孫要素を操作する
jQuery oneメソッドで一度だけ実行する
jQuery Deferredを使用するサンプル

△上に戻る