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

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

サンプル

以下の水色の四角またはテキストボックスに次の操作をするとイベント名の横にイベント名が表示されます。

サンプル1

・水色の四角にカーソルを入れる→mouseenter
・水色の四角にカーソルを外す→mouseleave
・水色の四角をクリックする→click
・水色の四角をダブルクリックする→dblclick

カーソル当てて下さい

イベント名:

サンプル2

・テキストボックスにカーソルを当てる→focus
・テキストボックスからカーソルを外す→blur
・テキストボックスの値を変更してテキストボックス内でエンターキーを押す→change

イベント名:

コード

上記コードのサンプルです。
13,27行目にonメソッドを使用しています。
onメソッドの下にそれぞれイベントを複数記述しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのonのサンプル</title>
<style>
#div1{height:50px;width:200px;border:1px solid #000;
background-color:LightCyan;margin:10px 0px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
	$('#div1').on({
		'mouseenter': function(e) {
			$('#s1').text('mouseenter');
		},
		'mouseleave': function(e) {
			$('#s1').text('mouseleave');
		},
		'dblclick': function(e) {
			$('#s1').text('dblclick');
		},
		'click': function(e) {
			$('#s1').text('click');
		}
	});
	$('#textbox1').on({
		'focus': function(e) {
			$('#s2').text('focus');
		},
		'blur': function(e) {
			$('#s2').text('blur');
		},
		'change': function(e) {
			$('#s2').text('change');
		}
	});
});
</script>
</head>
<body>
<div id="div1"><p>カーソル当てて下さい</p></div>
<input type="text" id="textbox1" value="100" maxlength="6">
<div><p>イベント名:<span id="s1"></p></span></div&gt;
<div><p>イベント名:<span id="s2"></p></span></div>
</body>
</html>

onメソッド

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

関連の記事

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

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る