【JavaScript/jQuery】function(e)について詳しく知りたい。

JavaScript/jQueryでonメソッドの引数として登場するfunction(e)について質問です。
某サイトに以下のような文章がありました。
「function(e)の「e」。これはイベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができるイベントオブジェクトです。「e」はイベント発生時の情報を持つオブジェクトなので**「e.target」のようにアクセスし、情報を得ることができます。**」
上記太字部分の意味がよく分からないので詳しく教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>jQuery テスト</title>
7  <!--<link rel="stylesheet" href="main.css">--><!-- JS Bin上では省略 -->
8</head>
9
10<body>
11  <div class="parent">
12    <button type="button" class="my-button">ボタン</button>
13  </div>
14  <div class="parent">
15    <button type="button" class="my-button">ボタン</button>
16  </div>
17
18  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
19  <!--<script src="main.js"></script>--><!-- JS Bin上では省略 -->
20</body>
21
22</html>

jQuery
1$('.my-button').on('click', function(e) {
2  // .my-buttonがクリックされた時にここが実行される
3  **$(e.target)**
4    .parent()
5    .css({ 'background-color': '#ff6666' });
6});

上記コードを読み込むと、buttonタグで作成したボタンを押せばdivの背景色が変化します。jQueryの"$(e.target)"部分の意味がわからないため、なぜこのように動作するのかがわかりません。
初心者でもわかりやすく教えていただけると幸いです。よろしくお願いします。

maisumakun

2022/04/19 21:48

> 上記太字部分の意味がよく分からないので何がわからないのか、もう少し掘り下げていただけないでしょうか？

m.ts10806

2022/04/19 23:20

過去質問に出ているような内容と思いますが、例：https://teratail.com/questions/33001 何をどう調べてどう分からなかったのでしょうか。

nyonsuke

2022/04/20 01:09

唐突に出てきた「target」の意味・目的が分からず混乱しておりました。お手数をかけて申し訳ございません。

m.ts10806

2022/04/20 01:44

私が提示した質問のコメントでも言及されているので読んでおいてください。

nyonsuke

2022/04/21 11:34

読ませていただきました。理解できました。ありがとうございました。

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

回答1件

ベストアンサー

「e.target」のようにアクセスし、情報を得ることができます。

e.target が何なのかはデバッグ実行してみると分かりやすいかと思います。

Chrome ブラウザの場合は「F12」キーを押すと JavaScript のデバッグが行えます。
下記は e.target の箇所にブレークポイントを設定した際のイメージになります。

ここでは .my-button クラスに click イベントを関連付けしている為、ボタンをクリックした際に function(e) が呼ばれます。そして e.target には、クリックした際の要素が入っています。
１つめのボタン（今回は説明の為に「ボタン１」とします）をクリックすると、 e.target には「ボタン１」が入ってきます。
したがって $(e.target) とすることで「ボタン１」に対する操作が行えることになります。

投稿2022/04/19 23:21

cx20

総合スコア4693

nyonsuke

2022/04/20 01:06

ご回答いただきありがとうございます。私のPCでもデバッグを実行してみました。以下実行画面です。 https://gyazo.com/b50b6921bc96516a74c7b74cc4678592 「e」...イベント発生時の様々な情報を持っているオブジェクト「target」...イベントの発生元である要素「e.target」...「e」が持つ情報の中から「target」を参照する。そのため、$(e.target)とすることで、「e.target」をJavaScriptオブジェクトとして様々な命令を出すことができる。以上のような認識で間違い無いでしょうか。お手数ですが、ご確認よろしくお願いします。