[Javascript 기초] Event가 발생한 대상 알아내기

Event가 발생 대상을 알아내는 방법으로는 e.target과 e.currentTarget이 있습니다.

 

[e.target]

이벤트가 발생했을  마우스 포인터가 위치해 있는 요소를 반환

[e.currentTarget]

이벤트가 발생했을 때 이벤트 문에서 선택자 요소를 반환

<main>
    <section>
        <article></article>
    </section>
</main>

<style>
    main {width: 200px; padding: 40px; background: #111;}
    main section {padding: 40px; background: #333;}
    main section article {padding: 40px; background: #666;}
</style>

<script>
    const main = document.querySelector('main');

    main.addEventListener('click', e=>{
        console.log(e.target);
        console.log(e.currentTarget); 
    })
</script>

 

이러한 코드에서 각 요소를 클릭했을 때의 결과이다.

<script>

/* main 태그 영역 선택 */
main.addEventListener('click', e=>{
    console.log(e.target); // 포인터가 위치한 요소 main 반환
    console.log(e.currentTarget); // 이벤트 문의 선택자 요소 main 반환
})

/* section 태그 영역 선택 */
main.addEventListener('click', e=>{
    console.log(e.target); // 포인터가 위치한 요소 section 반환
    console.log(e.currentTarget); // 이벤트 문의 선택자 요소 main 반환
})

/* article 태그 영역 선택 */
main.addEventListener('click', e=>{
    console.log(e.target); // 포인터가 위치한 요소 article 반환
    console.log(e.currentTarget); // 이벤트 문의 선택자 요소 main 반환
})

</script>