HTML5 JavaScript 複数のボタンに似たような処理を結び付ける

やりたいこと

ボタンが10個あって、1～10の番号が振られている。

ボタンを押すと、番号の数字をコンソールに出力する。

実現方法１

ボタンに一つずつ異なるidをつけて、getElementById→addEventListener。

デメリット：似た処理でソースコードが肥大化する。

実現方法２

ボタンに同じクラス名をつけてgetElementByClassname→ループでaddEventListener。

デメリット：ソースコードは１より少ないが、ボタンごとにイベントリスナ追加するため、実行時にメモリを無駄に消費する。

実現方法３－１

コンソールに出力する関数を一つだけ作る。

ボタンのonclickでその関数を呼ぶ。

そのとき引数でボタンのインデックスを渡す。

実現方法３－２

ボタンインデックスを区別できるクラスor属性を付加する。

コンソールに出力する関数を一つだけ作る。

ボタンのonclickでその関数を呼ぶ。

クラスor属性からボタンのインデックスを取得する。