ywork2020.com

Title

発生したイベントからハンドラーに渡されるデータを取得する

目次 (INDEX)

dataとは

ここで説明する data とは次の語句からなるjQueryのEventObjectプロパティです。
data
読み: データ
意味: 参考となる資料や情報

目次に戻る

dataプロパティの概要

この EventObject プロパティは、イベントが発生したときにハンドラーに渡されるデータを取得することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。

なお、ハンドラーに渡されるデータはオブジェクト型で記述します。

$(Selector).EventMethod({myKey:mydata}, function(eo){
	var eventData = eo.data.myKey;
});

目次に戻る

サンプルコードと実行結果

ここでは、ボタン要素の click イベントに関数をアタッチしておき、 イベントが発生した時に生成されるイベントオブジェクトの data プロパティ経由で、任意のデータを取得して表示してみます。

サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<button id="idButton">BUTTON</button>
	<script>...</script>
</body>
  • 06: button (ボタンです。この要素のクリックイベントからイベントオブジェクトのプロパティの値を取得してボタンのテキストに表示します。)
サンプルコード: script
<script>
	$("#idButton").click({number:2020}, function(eo){
		$(this).text(eo.data.number);
	});
</script>
  • 03: eo.data.number (イベントオブジェクトの data プロパティ経由で number キーの値を取得しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。 また、03行目の number も 02行目の number のことを指しており、これと対になるマップ値を取得することになります。
実行結果:
実行 :

目次に戻る