JavaScript jQuery イベント関数に引数を渡す方法｜VB.NET-TIPS などプログラミングについて

2021/06/15

jQuery の onメソッド を使ってマウスクリックやキー入力等に関連するイベント処理用の関数（イベントハンドラ）を jQuery要素 に割り当てることができます。

通常であればその関数に渡されるイベントオブジェクトを使ったりして処理を行います。例としてある対象要素のクリック時のイベント宣言は以下の様になります。

$('button').on('click', function(event) {
	console.log('click !!');
});

上記はイベントハンドラの引数に event を宣言していますが、これはイベントオブジェクトと呼ばれるもので、対象要素のイベントに関する各種の情報が入っています。たとえば、クラス名やID名等を持っていますので、この中の情報を参照することでいろんな処理も可能です。
（なお、イベントハンドラの引数は省略できます。）

そこで表題の件ですが、イベントオブジェクトとは異なるデータを渡したい場合はどうするのでしょうか。
jQuery のドキュメントには以下の様に説明があります。

.on( events [, selector ] [, data ], handler(eventObject) ) 

<パラメータ>
events   (文字列)   "click"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。
                    また、スペース区切りで複数のイベントを指定することも可能です。 
selector (文字列)   選択jQueryオブジェクトの子孫要素を設定することでイベントデリゲートできる。
data     (マップ値) イベントハンドラに渡したいデータをマップ値で指定します。 
handler  (関数)     eventsに対するイベントハンドラ。

この data を使ってイベントハンドラにデータを渡すことになります。（以下の様な連想配列で宣言します。）

var	testdata = { data1: "abcde", data2: 1200 };

それでは上記の data を使う例を示します。 button タグを３個配置し、各ボタンのイベントハンドラに２個のデータを渡す様にしました。

<html>
<head>
<meta charset="utf-8">
<title>test Event Para - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
    //button クリックイベント関数宣言(引数：button の「id」値)
    $("#button1").on('click', { paraId: "button1", paraData: "10" }, clickFunc);
    $("#button2").on('click', { paraId: "button2", paraData: "20" }, clickFunc);
    $("#button3").on('click', { paraId: "button3", paraData: "30" }, clickFunc);
});

function clickFunc(event) {
	//引数値は自分自身オブジェクトの項目として参照
	var id = event.data.paraId;		//「paraId」値
	var data = event.data.paraData;	//「paraData」値
	console.log("button id = " + id + ", data = " + data);
}
</script>
</head>
<body>
    <h2>test Event Para - 1</h2>
	<button id="button1">ボタン１</button>
	<button id="button2">ボタン２</button>
	<button id="button3">ボタン３</button>
</body>
</html>

渡されるデータ値はイベントオブジェクトの data プロパティの中のプロパティを参照する様にします。

なお、そのイベントハンドラに渡されるイベントオブジェクトを使うことでID名、クラス名等が参照できます。

function clickFunc(event) {
	//id のみ取得であればイベントオブジェクト[event.currentTarget.id]に値が在る!
	console.log("button id = " + event.currentTarget.id + ", type = " + event.type);
}

■jQuery ではなく javascript の addEventListener メソッドを使う方法

上記の例では jQuery の on メソッドを使ってイベント関数への引数の渡し方を説明しましたが、 javascript そのものの addEventListener メソッドを使う方法について説明します。

addEventListener を使う場合は、第1引数にイベントの種類を文字列で指定し、第2引数でイベント処理関数を指定します。HTMLファイルは以下の様になります。

<html>
<head>
<meta charset="utf-8">
<title>test Event Para - 2</title>
<script type="text/javascript">
//ロード時にイベント処理関数設定
window.onload = function(){
	document.getElementById('button1').addEventListener('click', clickFunc);
	document.getElementById('button2').addEventListener('click', clickFunc);
	document.getElementById('button3').addEventListener('click', clickFunc);
}
//addEventListener で登録される関数
function clickFunc(event) {
	console.log(event);
}
</script>
</head>
<body>
    <h2>test Event Para - 2</h2>
	<button id="button1">ボタン１</button>
	<button id="button2">ボタン２</button>
	<button id="button3">ボタン３</button>
</body>
</html>

そこでイベント関数に引数を渡すのですが、addEventListener の第2引数はイベント処理関数そのものでは無く、オブジェクトとして渡すことが出来ます。以下の様にオブジェクトの handleEvent プロパティにイベント処理関数を指定します。「ロード時にイベント処理関数設定」の部分だけを抜粋してその方法を示します。

window.onload = function(){
	document.getElementById('button1').addEventListener('click', { handleEvent: clickFunc } );
	document.getElementById('button2').addEventListener('click', { handleEvent: clickFunc } );
	document.getElementById('button3').addEventListener('click', { handleEvent: clickFunc } );
}

addEventListener の第2引数にオブジェクトが渡せるということは、他のデータも別のプロパティとして渡せることになります。

<html>
<head>
<meta charset="utf-8">
<title>test Event Para - 3</title>
<script type="text/javascript">
//ロード時にイベント処理関数設定
window.onload = function(){
	document.getElementById('button1').addEventListener('click', { handleEvent: clickFunc, para1: "10", para2: "aa" } );
	document.getElementById('button2').addEventListener('click', { handleEvent: clickFunc, para1: "20", para2: "bb" } );
	document.getElementById('button3').addEventListener('click', { handleEvent: clickFunc, para1: "30", para2: "cc" } );
}
//addEventListener で登録される関数
function clickFunc(event) {
	//[this]には addEventListener の第2引数そのものが渡される
	console.log(this.para1);
	console.log(this.para2);
	console.log(event);
}
</script>
</head>
<body>
    <h2>test Event Para - 3</h2>
	<button id="button1">ボタン１</button>
	<button id="button2">ボタン２</button>
	<button id="button3">ボタン３</button>
</body>
</html>

VB.NET-TIPS などプログラミングについて

■jQuery ではなく javascript の addEventListener メソッドを使う方法

関連する記事

コメント