반응형

📝event.target, event.currentTarget

<!DOCTYPE html>
<html lang="en">
<script>
    let onLogin = () => {
        console.log(event.target)
        // <span>Google</span>

        console.log(event.currentTarget)
        // <button onclick="onLogin()">
        //     <span>Google</span>
        // </button>
    }

</script>

<body>
    <button onClick=onLogin()>
        <span>Google</span>
    </button>
</body>
</html>

 

이벤트 버블링이라고 했을 때 event.target은 이벤트가 위임되어 발생하는 자식 위치를 의미(클릭한 자식 요소)를 하고 currentTarget의 경우 이벤트가 직접적으로 붙은 부모의 위치를 반환한다

 

🔗 참고 및 출처

https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

반응형