data-* 属性のJS上での利用について

Question

data-* 属性のJS上での利用について

https://teratail.com/questions/67444
の続き

例

<input id="calc" type="button" value="calc" data-calc="true" />

document.getElementById('calc').addEventListener('click', {calc: true, handleEvent: handleEvent}, false);

document.getElementById('calc').addEventListener('click', {calc: true, handleEvent: handleEvent}, false);
とは第二引数にオブジェクトでプロパティ名と値を記載すると、
下記と完全一致した時のみcalcIDの要素を取得できるという事でしょうか？
value="calc" data-calc="true"

・
自分でdataのサンプルを作ったのですが、JSの変数の二つ目が、
getAttributeがundefiedと出てしまいます。
どこに間違えがあるかご存知でしょうか？

https://codepen.io/anon/pen/Qpymwx?editors=1112

Answer 1

getElementsByNameでは<input>などの**name属性**を見てエレメントを検索します。classしか指定していない以上、codepenに書いた形では見つかりません。

また、addEventListenerの第2引数にオブジェクトを指定した場合、そのオブジェクトの中にあるhandleEventというメソッドを実行したのと同じ扱いになります（W3C）。ほかにプロパティがあっても、何も動作は変わりません。

自分でgetAttributeやdatasetを使って読み出して下さい。

Comments

[退会済みユーザー]

ありがとうございます。
確かにnameを付けたところundefinedが出てきました。
ただタグの中が出てくるかと思ったのですが、
なぜundefinedが返ってきているかが謎です。
https://codepen.io/anon/pen/Qpymwx?editors=1112

・下記を見るとどうもイベントハンドラの第二引数に、オブジェクトをいれられ、
その中のプロパティの値にメソッドを入れられるようですね。

http://7cc.hatenadiary.jp/entry/eventlistener-handleevent

// 変数に入れて
var foo = {
v: 1,
handleEvent: function(){ alert(this.v) }
}
document.addEventListener("click", foo)
document.removeEventListener("click", foo) // removeできる

// 直接
document.addEventListener("click", {
v: "hello",
handleEvent: function(){
alert(this.v)
document.removeEventListener("click", this)
}
})

難しくてよくわかりませんが、クリックされたときに上記のメソッドがじっこうされるという認識でよいんですかね？
ただ式を書くのと何が違うのか初心者にはわかりませんが。