質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

javascript イベントハンドラ アロー関数

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 428

score 24

質問失礼いたします。現在javascriptの講座を受けています。
そこで、下記の$elm[i].addEventListener('click' ,(e) => this.eventHndler(e));の第二引数部分が理解できずにいます。

1.(e) => this.eventHndler(e)の部分はどういう意味なのか。またアロー関数で書かなければどう書けるのか。ということを1番理解したいです。

初歩的な質問で大変恐縮ですが、ご教授いただけると幸いです。

 class Accordion{
        constructor(obj){
            console.log(obj.hookName);

            const $elm = document.querySelectorAll(obj.hookName);
            const elmLen = $elm.length;
            let i = 0;
            while(i < elmLen){

                $elm[i].addEventListener('click' ,(e) => this.eventHndler(e));
                i++;
            }
        }

        eventHndler(e){
         let tar = e.currentTarget;
         let nS = tar.nextElementSibling;

         if(nS.style.display === 'block'){
             nS.style.display = 'none'
         }else{
             nS.style.display = 'block'
         }
        }
    }



    const fA = new Accordion({
        hookName: '#js-faq',
        tagName: 'a'
    });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

クラス内でthisを参照するとそのクラス自身をかえします。
this.eventHndler(e)はクラス内のeventHndlerメソッドを呼んでおり
上位のaddEventListenerで指定したイベントのeを引数で渡します。

このとき、e.targetはクリックしたHTML要素を返し、
e.currenTtargetはイベントハンドラがアタッチされた要素を返します
したがって#js-faqのどこをクリックしても#js-faq次の要素の表示をon/offできます

<p>out
<div id="js-faq">click
<span>in</span></div>
<div hidden>test</div>
</p>
<script>
 class Accordion{
   id="hoge";
   constructor(obj){
     console.log(this);
     const $elm = document.querySelectorAll(obj.hookName);
     const elmLen = $elm.length;
     let i = 0;
     $elm.forEach(x=>{
       x.addEventListener('click' ,(e)=>{
         console.log(this);
         this.eventHndler(e);
       });
     });
   }

   eventHndler(e){
     console.log([e.target,e.currentTarget]);
     const tar = e.currentTarget;
     const nS = tar.nextElementSibling;
     nS.toggleAttribute('hidden')
   }
 }
const fA = new Accordion({
hookName: '#js-faq',
tagName: 'a'
});
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/25 18:53

    ありがとうございます!!
    とても端的にご教授いただき、自分の理解できていないところがわかりました。
    まだ完全に理解できていないですが、検索をして理解できるよう励みます。
    ご返答いただきありがとうございます!!

    キャンセル

checkベストアンサー

0

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

// 例1)アロー関数を指定した場合
$elm[i].addEventListener('click', (e) => this.eventHndler(e));

// // 例2)無名関数を指定した場合
// $elm[i].addEventListener('click', function(e){
//     this.eventHndler(e);
// });

// 例3)関数名を指定した場合
$elm[i].addEventListener('click', this.eventHndler);

なお、以下のような書き方は出来ません。

$elm[i].addEventListener('click', this.eventHndler(e));

説明はこちらの回答を参照下さい。

https://teratail.com/questions/363325#reply-494419

<追記>
this.eventHndler(e) は Accordion クラスのメンバ関数である eventHndler 関数の呼び出しになります。引数に e を渡すことでイベント情報を引き継いでいます。 
イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/24 12:13

    int32_t さん、ご指摘ありがとうございます。
    自分理解が足りていませんでした。試した所、非アロー関数の場合、this が button になっているのを確認しました。
    大変失礼しました。一旦、例2は削除させていただきます。。

    キャンセル

  • 2021/11/25 18:54

    ありがとうございます!!
    自分が知りたかった、アロー関数ではなかった時どう記述するのかという点をご教授いただき大変勉強になりました。
    ご返答ありがとうございます!!

    キャンセル

  • 2021/11/25 23:50

    こちらこそ混乱させる回答をしてしまい、失礼しました。自分も今一度 JavaScript を学びなおそうと思います。。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

閲覧数の多いJavaScriptの質問