728x90
300x250
자바스크립트 이벤트 단계
이벤트는 크게 3단계에 걸쳐서 발생한다.
- 단계1 : 캡처 단계
- 단계2 : 타겟 단계
- 단계3 : 버블링 단계
아래와 같은 돔 구주에서 두번째 tr 첫번째 td 지점을 클릭 할경우
<html>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td> <!-- 클릭지점 -->
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
아래의 이미지는 캡쳐링과 타겟 버블링이 발생하는 과정을 보여준다.
제일 위에 window 최상위 DOM부터 시작해서 흐름에 따라 클릭한 타겟 지점 바로 위 까지 캡처 단계이다.
클릭한 지점에서 타겟 단계, 타겟지점 이후 부터 다시 최상위 DOM까지 흘러가는 버블링 단계를 거치게 된다.
- 이벤트 흐르은 오직 DOM노드 객체를 따라 이동한다.
- 사용자가 만든 객체에서는 이벤트가 흐르게 할 수 없다.
이벤트 흐름 단계 확인하는 방법
eventPhase 프로퍼티를 사용하여 이벤트 단계를 알 수있다.
document.addEventListener("click",function(e){
console.log("doument phase="+e.eventPhase);
},true);eventPhase 값에 따라서 단계를 확인할 수 있다.
1 = 캡쳐링 단계
2 = 타겟 단계
3 = 버블링 단계
이미지 출처 : https://www.apexhours.com/
728x90
반응형
'javaScript' 카테고리의 다른 글
| 타겟(Target) 단계 (0) | 2023.02.27 |
|---|---|
| 캡처(Capture) 단계 (0) | 2023.02.26 |
| [javaScript] 이벤트 원리, 종류 (0) | 2023.02.24 |
| DOMContentLoaded와 load의 차이 (0) | 2022.12.24 |
| [javaScript] 클래스 (0) | 2022.12.18 |
댓글