이벤트 버블링(Event Bubbing)

이벤트 버블링(Event Bubbing)

이벤트 버블링은 한 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 요소들에게 전달되어 가는 특성을 의미 (자식태그에서 부모태그로 이벤트 전파)

event.currentTarget

• 읽기 전용 속성이며, 이벤트가 발생한 요소부터 부모들의 요소까지를 반환한다.

event.Target

• 이벤트가 발생한 요소 안의 최하위 요소가 될 수 있는 요소를 반환한다.

---

const onClick = (event) => {
    console.log(event.target)
    console.log(event.currentTarget)
}

<div>
    <button>
        <span>Hello!</span>
    </button>
</div>

console에서의 결과값

console.log(event.target)
↓ 콘솔에서 아래의 값을 출력
<span>Hello!</span> 를 출력

console.log(event.currentTarget)
↓ 콘솔에서 아래의 값을 출력
<button>
    <span>Hello!</span>
</button> 를 출력