이벤트 버블링_Java Script
이벤트 버블링이란?
- 이벤트가 제일 깊은 곳에 있는 요소에서 시작해, 부모 요소를 거슬러 올라가며 발생하는 현상.
- 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작한다.
- 이어서 부모 요소의 핸들러가 동작한다.
- 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
- 가장 안쪽의
<p>
를 클릭하면 순서대로 다음과 같은 일이 벌어진다.
<p> -> <div> -> <form>
<p>
에 할당된 onclick 핸들러가 동작한다.- 바깥의
<div>
에 할당된 핸들러가 동작한다. - 바깥의
<form>
에 할당된 핸들러가 동작한다. - document 객체를 만날 때까지, 각 요소에 할당된 핸들러가 동작한다.
event.target과 event.currentTarget(=this)의 차이점
- event.target은 실제 이벤트가 시작된 타깃 요소이다. 버블링이 진행되어도 변하지 않는다.
- event.currentTarget(=this)는 현재 요소로, 현재 실행중인 핸들러가 할당된 요소를 참조한다.
- 큰 틀 중에서도 가장 안쪽에 있는 요소가 event.target라면, 이 요소를 감싸는 큰 틀이 event.currentTarget(=this)라고 할 수 있다.
Author And Source
이 문제에 관하여(이벤트 버블링_Java Script), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suminllll/이벤트-버블링JavaScript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)