【JavaScript】event.targetとevent.currentTargetの違い

JavaScriptのevent.targetとevent.currentTargetの違いについての記事です。

イベントが発生したときにコールバック関数に渡されてくるeventオブジェクトにはイベントに関する情報が格納されている。イベントの発生源となる要素を取得する際、この２つの違いで戸惑ったのでまとめます。

結論

event.currentTarget : イベントハンドラを登録した要素
event.target : イベントが発生した要素

実例

ポートフォリオの内容を例とする。
（GitHubはこちらをクリック）

ヘッダーに４つのアイコンがあり、アイコンをクリックすると該当する位置までスクロールするようになっている。
HTMLファイルは以下の通り。

index.html

<header class="d-flex justify-content-center align-items-center w-100 header">
    <span class="mr-4 about-icon" v-on:click="scroll"><i class="fas fa-user-alt"></i></span>
    <span class="mr-4 ml-4 skills-icon" v-on:click="scroll"><i class="fas fa-pen"></i></span>
    <span class="mr-4 ml-4 works-icon" v-on:click="scroll"><i class="fas fa-file-code"></i></span>
    <span class="ml-4 contact-icon" v-on:click="scroll"><i class="fas fa-envelope"></i></span>
</header>

jsファイルは以下の通り。

main.js

const header = new Vue({
    el:'header',
    methods:{
        scroll:function(event){
            switch(event.currentTarget){
                case $('.about-icon')[0]:
                    const about = $('#about').offset().top;
                    $("html, body").animate({ scrollTop: about - 20 }, 200);
                    break;
                case $('.skills-icon')[0]:
                    const skills = $('#skills').offset().top;
                    $("html, body").animate({ scrollTop: skills - 20}, 200);
                    break;
                case $('.works-icon')[0]:
                    const works = $('#works').offset().top;
                    $("html, body").animate({ scrollTop: works - 20 }, 200);
                    break;
                case $('.contact-icon')[0]:
                    const contact = $('#contact').offset().top;
                    $("html, body").animate({ scrollTop: contact - 20 }, 200);
                    break;    
            }
        }
    }
})

event.currentTargetではspan要素を取得することができ、event.targetではFontAwesomeのi要素が取得される。

場合分けをするにあたり、span要素を取得できた方が都合が良かったため、今回はevent.currentTargetを用いている。