業務中に「？？？」となったので調べた備忘録です。
$("#button").on("click", {when:"morning", message: "Good Morning"}, function (e){
console.log(e.data.message);
});
これでボタンを押したら"Good Morning"が出力されます。
foo.data.messageのdataについて、前から何だろうなと思いながらをあまり理解していませんでした。
「data」の正体
「ボタンを押す」というような出来事のことをイベントといい、このイベントが発火した時に実行されるコードをイベントハンドラ（イベントリスナー）と言います。
このイベントハンドラは引数としてオブジェクトを受け取るのですが、これがイベントオブジェクトです。
つまり今回ではfunction(e){...}がイベントハンドラ、eがイベントオブジェクトに相当します。
そしてイベントオブジェクトはイベント発生時の情報を持っているという特徴があります。
このイベントオブジェクトにはいくつものプロパティが定義されており、プロパティから多くの情報を取得できます。
プロパティには例えば以下のようなものがあります。
target: イベントの発生元の要素
pagex : イベントが発生したページ上でのx座標
pagey : イベントが発生したページ上でのy座標
このプロパティの1つにdataがあります。
jQueryではdataプロパティを使うことで、イベントハンドラにオブジェクトと同時にデータを引き渡すことができます。
上記の書き方によって、ボタンがクリックされた時にdataとして{when:"morning", message: "Good Morning"}をイベントオブジェクトであるeに受け渡すことができます。
そして受け渡したイベントハンドラではdataを呼び出すことができるようになります。
つまり、e.dataでイベントオブジェクトeに受け渡されたデータをみますよーという合図になリ、さらに受け渡したデータのうちmessageをキーとして指定することで対応する値である"Good Morning"を取得できるというわけです。
改めて箱を用意しなくても、引数で渡すだけでデータの受け渡しができちゃうんですね。
便利です。
簡単ですが以上がdataの正体となります。
自分で定義していたわけでもないdataがどこから現れたか疑問だったのですが、ようやくスッキリしました。
＊2020/03/07 追記
私の理解の誤りをご指摘いただき、内容を見直し一部修正しております。