【JavaScript】event.target과 이벤트.currentTarget 차이

JavaScript 이벤트target과 이벤트.이것은 currentTarget의 차이에 관한 글입니다.
이벤트 발생 시 리셋 함수에 전달되는 eventオブジェクト 에는 이벤트와 관련된 정보가 저장됩니다.사건의 출처 요소를 얻을 때 이 두 가지가 다르기 때문에 곤혹스러우니 총괄해 보자.

결론

event.currentTarget: 이벤트 처리 프로그램의 요소를 등록했습니다.
event.target: 이벤트 발생 요소

인스턴스

제품 조합의 내용을 예로 들다.
(GitHub 클릭여기

제목에 4개의 아이콘이 있는데 아이콘을 클릭하면 해당 위치로 스크롤할 수 있습니다.
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要素, 이벤트를 획득할 수 있습니다.target에서 Font Awesomei要素을 획득합니다.
장소 구분을 할 때 취득span要素이 편리하기 때문에 이번에는 이벤트입니다.currentTarget 을 사용합니다.