Javascript 関数内でクリックイベントをターゲット情報付きで発生させる？方法について

HTML内の複数の<td>オブジェクトのonclickイベントハンドラにmyclick関数が紐づいている時に
click{target:{index:Math.floor(math.rand() * 5}});といった記述で特定<tr>オブジェクトのclick()関数を起動させている記述を見たのですが、この構文の構造が理解できません。
このclick{}に渡されているオブジェクトはなんなのでしょうか？
（すみません、当方javascriptの関数やオブジェクトの知識が不足しておるようです、正直なんの知識にあたる物なのかも理解できておりません。）

Javascript
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script>
6  var rand = Math.floor(Math.random()*5);
7  function init(){
8    click({target:{index: rand}});
9  }
10  function click(e){console.log(e.target.index);}
11</script>
12</head>
13<body onload="init()">
14  <table>
15    <tr>
16      <td onclick="click(e)" id="1td" index="0">1</td>
17      <td onclick="click(e)" id="2td" index="1">2</td>
18      <td onclick="click(e)" id="3td" index="2">3</td>
19      <td onclick="click(e)" id="4td" index="3">4</td>
20      <td onclick="click(e)" id="5td" index="4">5</td>
21    </tr>
22  </table>
23</body>
24</html>

ちゃんとクリックされたであろう要素のインデックスが表示されました。
また自分は以下のやり方で任意trからclickを動かそうとしたのですが、そちらは動きませんでした。

Javascript
1document.getElementById(rand +"td").onclick();

エラー内容は：Uncaught ReferenceError: e is not definedといったエラーが出ました。
どなたかご回答の程宜しくお願いします。

行動規範の内容に同意します

回答2件

まずclickという関数名をやめてください
それと埋め込んだon～でイベントを拾いたいなら引数なしのeventでアクセスします

javascript
1<script>
2function func_click(){
3  console.log(event.target.getAttribute('index'));
4}
5</script>
6<table>
7<tr>
8<td onclick="func_click()" id="1td" index="0">1</td>
9<td onclick="func_click()" id="2td" index="1">2</td>
10<td onclick="func_click()" id="3td" index="2">3</td>
11<td onclick="func_click()" id="4td" index="3">4</td>
12<td onclick="func_click()" id="5td" index="4">5</td>
13</tr>
14</table>

※initが何をしたいかわかりませんので割愛

投稿2021/08/31 00:32

編集2021/08/31 00:32

yambejp

総合スコア116724

java_shin

2021/08/31 07:09

ご指摘ありがとうございます。確かにclick()だと既にjavascriptにある関数名と被ってしまいますね。気を付けます。"func_click()"等の名前を付けるようにします。

行動規範の内容に同意します

ベストアンサー

この構文の構造が理解できません。

オブジェクトリテラルで表現した1つのオブジェクトをclick()関数に渡しています。click()の実装が引数のオブジェクトの .target.index にだけアクセスするので、indexプロパティを持つオブジェクトが値のtarget プロパティを持つオブジェクトを渡せば動きます。

document.getElementById(rand +"td").onclick();

これでは click() 関数に引数を渡していません。

html
1      <td onclick="click(e)" id="1td" index="0">1</td>

この onclick 属性は複数の理由で動きません。

変数 e が未定義。おそらく event に変えればよいです。
click() というメソッドが、HTMLElement に定義されているため、自分の click() 関数は呼ばれない。関数名を変えましょう。
自分の click() の中で e.target.index プロパティにアクセスしているが、td要素にindexというプロパティはない。e.target.getAttribute('index') などとする必要がある。しかしそう変更すると click({target:{index: rand}}); は動かなくなる。

投稿2021/08/30 16:22

編集2021/08/31 07:41

int32_t

総合スコア21695

java_shin

2021/08/31 07:05

回答ありがとうございます。説明不足で申し訳ありません。このプログラムでやりたいのは、このhtmlを読み込んだときにクリック要素を持つテーブルを作成してで、そしてそれが終わったらボタンを押下するという処理をやりたいです。ご回答に".target.index にだけアクセスするので、indexプロパティを持つオブジェクトが値のtarget プロパティを持つオブジェクトを渡せば動きます。"とあるのですが、もしほかにも全く関係ない要素にindexプロパティを持つオブジェクトがあった場合このプログラムはその関係ないオブジェクトに対してもclick()関数を動かしてしまうのでしょうか？

int32_t

2021/08/31 07:20 編集

> 関係ないオブジェクトに対してもclick()関数を動かしてしまうのでしょうか？そんなことはないです。引数として渡したオブジェクトだけが関係します。 click({target:{index: rand}}); を呼び出すと、文書中の要素にはいっさいアクセスしません。td要素がクリックされるわけではありません。

java_shin

2021/08/31 07:33

ありがとうございます。なにか僕の中の意識としてhtmlをブラウザで開いて実際に要素をクリックした時にその対象がtargetとして渡されるという考えが強すぎてこの考えが理解し辛くなってますが。（イベントが発生して、そのイベント発生対象のDOMはこれだっていうのがTargetだという考えにとらわれてます。）しかしこういった感じでtargetオブジェクトを作成してそれを使用してどの要素のclick()を動かさせるのかと言った使い方ができるんですね。

int32_t

2021/08/31 07:39

> こういった感じでtargetオブジェクトを作成してそれを使用してまあ、普通はそんなことしないと思いますよ。クリックイベントハンドラがちゃんと動けば、document.getElementById(...).click() とか document.getElementById(...).dispatchEvent(new MouseEvent('click')); でイベントを発生させられるので。

java_shin

2021/08/31 21:57

>document.getElementById(...).click() とか document.getElementById(...).dispatchEvent(new MouseEvent('click')); 今朝もう一回document.getElementById().click()で試してみたらちゃんと動きました。ただこういった特殊な書き方もできるのはどういった理屈なのかというのはこれからjavascriptを使用していく上で知っておくとよいのかなぁと思いました。javascriptはいろんな書き方ができるんですね。有益なアドバイス有難うございました。

行動規範の内容に同意します

あなたの回答