JavaScript : table, td タグにイベント処理をつける (1)

・td にクリックイベントを付けるサンプル。
  td タグに直接 onclick="関数" の JavaScript を入れる例。
  <td onclick="関数名(引数)">

・以下の話に注意。
  関数 onclickTd(){...} 内の
  1) 引数にどんな値がセットされているか？
  2) this が何を表しているか？ (下のノートを参照)
テーブル、セルをクリックしてみる
0-0:onclickTd()
引数なし。 		0-1:onclickTd(this)
引数を this にすると param1 は td (HTMLTableCellElement) になります。
1-0:onclickTd(123)
ユーザー指定の引数 (1個)。 		1-1:onclickTd(event)
event はあらかじめ定義されている暗黙の変数名です。
引数を event にするとマウスイベント (MouseEvent) になります。
2-0:onclickTd(123, '文字列1')
ユーザー指定の引数 (2個)。 		2-1:onclickTd(this, '#9ff')
td の背景色を変えてみる。
3-0:onclickTd
() がないと何も起こりません。

デバッグ出力

(2017/12-2024/03)
動作 : Edge120, Firefox120, Chrome119

◎ノート
・関数の引数が文字列の場合
  onclick="..." ですでにダブルクオート " を使っているので、
　これと重複しないようにシングルクォート ' を使います。

  <td onclick="func('文字列')">

・(昔話) td要素のクラス名は Chrome, Firefox, Edge83 と IE11 で異なります。
  Chrome, Firefox : HTMLTableCellElement
  IE11            : HTMLTableDataCellElement

  (2020) IE はすでに昔話なので気にせず。

◎ 関数 onclickTd(){...} 内の this が何を表すか？ (2021/06) 

  1) "use strict"; がある場合 undefined
  2) "use strict"; がない場合 Window オブジェクト

・onclickTd() 内の this が何を表しているか？の話は、クラスと
　オブジェクトを使ったプログラムを書くときに問題になります。

  例: onclickTd() が class のメソッドだった場合。

  onclickTd() を呼び出す側の書き方が誤っていると、this の指している
　オブジェクトが異なる場合があります。 undefined エラーが出るなど
　混乱することがあります。Java や C# に慣れている人でも最初に必ず
　はまる話です。Java や C# と同じ感覚で書くと正常に動作しません。
  onclickTd() が class のメソッドの場合は、メソッドを呼び出す側は
　アロー関数で記述します。
inserted by FC2 system