回答編集履歴

説明に誤りがあった為、例２を削除

2021/11/24 03:16

投稿

スコア4700

answer CHANGED Viewed

@@ -5,10 +5,10 @@
 // 例１）アロー関数を指定した場合
 $elm[i].addEventListener('click', (e) => this.eventHndler(e));
-// 例２）無名関数を指定した場合
+// // 例２）無名関数を指定した場合
-$elm[i].addEventListener('click', function(e){
+// $elm[i].addEventListener('click', function(e){
-    this.eventHndler(e);
+//     this.eventHndler(e);
-});
+// });
 // 例３）関数名を指定した場合
 $elm[i].addEventListener('click', this.eventHndler);

例に番号を追加

2021/11/24 03:16

投稿

スコア4700

answer CHANGED Viewed

@@ -2,15 +2,15 @@
 以下はアロー関数を使用した場合とそれ以外の書き方の例になります。
 ```javascript
-// アロー関数を指定した場合
+// 例１）アロー関数を指定した場合
 $elm[i].addEventListener('click', (e) => this.eventHndler(e));
-// 無名関数を指定した場合
+// 例２）無名関数を指定した場合
 $elm[i].addEventListener('click', function(e){
     this.eventHndler(e);
 });
-// 関数名を指定した場合
+// 例３）関数名を指定した場合
 $elm[i].addEventListener('click', this.eventHndler);
 ```

説明の図を追加しました

2021/11/23 17:05

投稿

スコア4700

answer CHANGED Viewed

@@ -21,4 +21,9 @@
 説明はこちらの回答を参照下さい。
-[https://teratail.com/questions/363325#reply-494419](https://teratail.com/questions/363325#reply-494419)
+[https://teratail.com/questions/363325#reply-494419](https://teratail.com/questions/363325#reply-494419)
+＜追記＞
+`this.eventHndler(e)` は `Accordion` クラスのメンバ関数である `eventHndler` 関数の呼び出しになります。引数に `e` を渡すことでイベント情報を引き継いでいます。
+![イメージ説明](6391ba1b51ea2a3af92173f73a9fcbff.png)

誤字修正

2021/11/23 17:00

投稿

スコア4700

answer CHANGED Viewed

@@ -1,4 +1,4 @@
-引数の `e` は `event` の略\で `click` イベントが発生した際に渡されるイベント情報になります。
+引数の `e` は `event` の略で `click` イベントが発生した際に渡されるイベント情報になります。
 以下はアロー関数を使用した場合とそれ以外の書き方の例になります。
 ```javascript

説明を追加

2021/11/23 16:23

投稿

スコア4700

answer CHANGED Viewed

@@ -1,14 +1,24 @@
+引数の `e` は `event` の略\で `click` イベントが発生した際に渡されるイベント情報になります。
+以下はアロー関数を使用した場合とそれ以外の書き方の例になります。
 ```javascript
-// アロー関数を使った書き方
+// アロー関数を指定した場合
 $elm[i].addEventListener('click', (e) => this.eventHndler(e));
-// アロー関数を使わない書き方
+// 無名関数を指定した場合
-$elm[i].addEventListener('click', function(event){
+$elm[i].addEventListener('click', function(e){
-    this.eventHndler(event);
+    this.eventHndler(e);
 });
+// 関数名を指定した場合
+$elm[i].addEventListener('click', this.eventHndler);
 ```
+なお、以下のような書き方は出来ません。
+```javascript
+$elm[i].addEventListener('click', this.eventHndler(e));
+```
 説明はこちらの回答を参照下さい。
 [https://teratail.com/questions/363325#reply-494419](https://teratail.com/questions/363325#reply-494419)

アロー関数を使わない書き方を追記

2021/11/23 16:23

投稿

スコア4700

answer CHANGED Viewed

@@ -1,3 +1,14 @@
-こちらの回答が参考になりませんか？
+```javascript
+// アロー関数を使った書き方
+$elm[i].addEventListener('click', (e) => this.eventHndler(e));
+// アロー関数を使わない書き方
+$elm[i].addEventListener('click', function(event){
+    this.eventHndler(event);
+});
+```
+説明はこちらの回答を参照下さい。
 [https://teratail.com/questions/363325#reply-494419](https://teratail.com/questions/363325#reply-494419)