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

Question

質問失礼いたします。現在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'
    });

Answer 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>

Comments

[koko122102]

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

Answer 2

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

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

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

// 例３）関数名を指定した場合
$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 を渡すことでイベント情報を引き継いでいます。

Comments

[koko122102]

ご返答ありがとうございます。拝見したのですが結論、まだわからないです。
(e) => の部分はわかるのですが、 this.eventHndler(e)の、(e)という引数が設定されているのが理解できません。

[cx20]

説明用に図を追加してみました。

[cx20]

//例１を無名関数に書き換えたものが例２になります。
//eventHndler の 引数に e を渡さない場合、イベント情報が引き継がれない為、(e) が設定されています。
//
//// OK
//$elm[i].addEventListener('click', function(e){
//　　this.eventHndler(e);
//});
//
//// NG
//$elm[i].addEventListener('click', function(e){
//　　this.eventHndler();
//});

[int32_t]

例2が不正確だと思います。非アロー関数の場合は this が $elm[i] になるので。

[cx20]

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

[koko122102]

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

[cx20]

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