JavaScript: table td にイベントリスナーを付ける。クラスとアロー関数のサンプル

イベント処理がクラス class のメソッドの場合。

1) onclick でリスナーを登録
  onclick は 1つのリスナーだけ登録できます。

  td.onclick = event => this.onclickTd(td, event); // => はアロー関数

2) addEventListener でリスナーを登録
  addEventListener は複数のリスナーを登録できます。

  td.addEventListener("click", event => this.onclickTd(td, event));
テーブル
0-0 0-1 0-2 0-3
1-0 1-1 1-2 1-3
2-0 2-1 2-2 2-3

デバッグ


(2017/10-2022/04)
動作     : Edge99, Firefox95, Chrome96
動作せず : IE11 (ES2015使用)

◎ノート

・関数 onclickTd() 内の this が MyApp のオブジェクトになるように注意。
  2020年代はアロー関数でイベント処理を登録します (IEでは動作せず)。

◎ 昔話

・JavaScript に不慣れだと混乱する話が 2つある。
  C# や Java の感覚に慣れてる人も必ずハマるので注意・・・

1) IE 時代までの昔話。
   関数 onclickTd() 内の this が MyApp のオブジェクトになるように
   bind で指定する。
   this が td や window だと、他のメソッドを呼んだときに関数が見つ
   からないエラー (undefined エラー)が出る。

  (2022) 現在はアロー関数を使うので、bind で書く必要はありません。
  アロー関数は IE では動作しません。

2) let や const がなかった時代の昔話。
  onclickTd(td) の td が個別に確保されるようにする。
  td を共通の変数で使いまわさないようにする。
  var td ではなく、let td や const td で宣言する。
  var td か、let td かで意味が変わるので注意。var は使用しない。

・MDN: Function.bind()
inserted by FC2 system