on:click 이벤트 대상, 요소 가져오기 (currentTarget vs target)

꽤나 중요한 내용인데 또 막상 외워지지 않는 그것.

온클릭 이벤트를 어떤 요소에 걸었을 때, 그 html 요소를 가져오고 싶을 때가 있다.

 

자바스크립트에는 버블링과 캡쳐링이라는 개념이 있다.

버블링은 한 요소에 이벤트가 발생하면 핸들러가 동작하고 그 다음 부모 요소의 핸들러가 동작하고.. 더이상 부모가 없을 때까지 이벤트 핸들러가 동작하는 것이다.

사실 버블링은 너무 자연스럽기 때문에 딱히 느껴지지 않기도 하다.

 

지금 술 계산기를 만들고 있는데,  카드를 누르면 그 요소를 가져와서 class를 추가해주고 싶다.

<script>
    export let title;
    export let emoji;

    function selectCard(e){
        console.log(e.currentTarget.classList)
        console.log(e.target.classList)
    }

</script>

<div class="card-wrap">
    <div class="card" on:click="{selectCard}">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="card-title">{title}</div>
                <div class="emoji">{emoji}</div>
            </div>
        </div>
    </div>

</div>

card 클래스를 가진 요소에 on:click 함수를 걸어주었다. 하지만 사실상 emoji 클래스를 클릭하거나, title을 클릭해도 card 클래스에 걸려있는 on:click이벤트로 selectCard 함수가 동작한다. 이게 버블링 때문이라는 것!

그런데 e.currentTarget.classList 와 el.target.classList 이 매우 다르다!

 

e.currentTarget은 이 이벤트가 걸려있는 그 요소를 가져오고,

e.target은 내가 누른 요소! 즉 버블링의 시초를 가져온다.

 

저렇게 콘솔을 찍게 해놓고, 아래 표시해놓은 이모지를 누르면 콘솔창엔 다음과 같이 찍힌다.

 

classList를 가져오도록 했는데, currentTarget의 classList는 card 클래스, target의 classList는 emoji이다.

 

매우 간단하죠~?

끝!