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

jQueryの1つの要素に複数のイベントリスナを登録するサンプルです。
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/

関連の記事

jQuery 属性値を取得/設定するサンプル(attr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル

△上に戻る