回答編集履歴

6

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

2021/11/24 03:16

投稿

cx20
cx20

スコア4633

test CHANGED
@@ -12,13 +12,13 @@
12
12
 
13
13
 
14
14
 
15
- // 例2)無名関数を指定した場合
15
+ // // 例2)無名関数を指定した場合
16
16
 
17
- $elm[i].addEventListener('click', function(e){
17
+ // $elm[i].addEventListener('click', function(e){
18
18
 
19
- this.eventHndler(e);
19
+ // this.eventHndler(e);
20
20
 
21
- });
21
+ // });
22
22
 
23
23
 
24
24
 

5

例に番号を追加

2021/11/24 03:16

投稿

cx20
cx20

スコア4633

test CHANGED
@@ -6,13 +6,13 @@
6
6
 
7
7
  ```javascript
8
8
 
9
- // アロー関数を指定した場合
9
+ // 例1)アロー関数を指定した場合
10
10
 
11
11
  $elm[i].addEventListener('click', (e) => this.eventHndler(e));
12
12
 
13
13
 
14
14
 
15
- // 無名関数を指定した場合
15
+ // 例2)無名関数を指定した場合
16
16
 
17
17
  $elm[i].addEventListener('click', function(e){
18
18
 
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- // 関数名を指定した場合
25
+ // 例3)関数名を指定した場合
26
26
 
27
27
  $elm[i].addEventListener('click', this.eventHndler);
28
28
 

4

説明の図を追加しました

2021/11/23 17:05

投稿

cx20
cx20

スコア4633

test CHANGED
@@ -45,3 +45,13 @@
45
45
 
46
46
 
47
47
  [https://teratail.com/questions/363325#reply-494419](https://teratail.com/questions/363325#reply-494419)
48
+
49
+
50
+
51
+
52
+
53
+ <追記>
54
+
55
+ `this.eventHndler(e)` は `Accordion` クラスのメンバ関数である `eventHndler` 関数の呼び出しになります。引数に `e` を渡すことでイベント情報を引き継いでいます。
56
+
57
+ ![イメージ説明](6391ba1b51ea2a3af92173f73a9fcbff.png)

3

誤字修正

2021/11/23 17:00

投稿

cx20
cx20

スコア4633

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

2

説明を追加

2021/11/23 16:23

投稿

cx20
cx20

スコア4633

test CHANGED
@@ -1,20 +1,40 @@
1
+ 引数の `e` は `event` の略\で `click` イベントが発生した際に渡されるイベント情報になります。
2
+
3
+ 以下はアロー関数を使用した場合とそれ以外の書き方の例になります。
4
+
5
+
6
+
1
7
  ```javascript
2
8
 
3
- // アロー関数を使っ書き方
9
+ // アロー関数を指定し場合
4
10
 
5
11
  $elm[i].addEventListener('click', (e) => this.eventHndler(e));
6
12
 
7
13
 
8
14
 
9
- // アロー関数を使わない書き方
15
+ // 無名関数を指定した場合
10
16
 
11
- $elm[i].addEventListener('click', function(event){
17
+ $elm[i].addEventListener('click', function(e){
12
18
 
13
- this.eventHndler(event);
19
+ this.eventHndler(e);
14
20
 
15
21
  });
16
22
 
17
23
 
24
+
25
+ // 関数名を指定した場合
26
+
27
+ $elm[i].addEventListener('click', this.eventHndler);
28
+
29
+ ```
30
+
31
+
32
+
33
+ なお、以下のような書き方は出来ません。
34
+
35
+ ```javascript
36
+
37
+ $elm[i].addEventListener('click', this.eventHndler(e));
18
38
 
19
39
  ```
20
40
 

1

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

2021/11/23 16:23

投稿

cx20
cx20

スコア4633

test CHANGED
@@ -1,4 +1,26 @@
1
+ ```javascript
2
+
3
+ // アロー関数を使った書き方
4
+
5
+ $elm[i].addEventListener('click', (e) => this.eventHndler(e));
6
+
7
+
8
+
9
+ // アロー関数を使わない書き方
10
+
11
+ $elm[i].addEventListener('click', function(event){
12
+
13
+ this.eventHndler(event);
14
+
15
+ });
16
+
17
+
18
+
19
+ ```
20
+
21
+
22
+
1
- こちらの回答考になりませんか?
23
+ 説明はこちらの回答照下さい。
2
24
 
3
25
 
4
26