이벤트는 코드의 순서대로 실행이 되는 줄 알았는데 캡처링과 버블링이라는것이 존재하고 그에 따른 순서가 있다고한다. 일명 캡캡캡 버버버인데 정리해보려고한다.
캡처링(Capturing)
위에서 아래로 간다 (큰 영역에서 작은 영역)
버블링(Bubbling)
버블버블 (위로 올라간다 거품이 생기면서 점점 위로 올라간다고 생각하기)
기본값이 false라 평소에 썼던 이벤트들은 전부 버블링이다.
둘의 차이가 뭘까 이벤트가 실행될때 캡처링이 먼저 일어나니깐 실행도 먼저된다는데 이해가 되지 않는다.
<form action="">
<button type="submit" class="submit">제출</button>
</form>
<script>
const submit = document.querySelector('.submit');
submit.addEventListener('click', (event) => {
console.log('clicked');
event.preventDefault();
// event.stopPropagation();
});
document.body.addEventListener('click', () => {
console.log('event still alive!');
});
</script>=> document의 이벤트에 세번째 매개변수자리에 true가 없으므로 이벤트 버블링 발생한다. (submit => document)
submit.addEventListener('click', (event) => {
console.log('clicked');
event.preventDefault();
// event.stopPropagation();
}, true);=> 만약 true가 있다면? 이벤트 캡쳐링 발생 (document => submit)
Q. 왜 true를 넣으면 캡쳐링이 감지될까?
-> 이건 그렇게 짜여져 있기 때문에 냅다 외워라.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event</title>
<link rel="stylesheet" href="../reset.css">
<style>
</style>
</head>
<body>
<article class="parent">
<button class="btn" type="button">버튼</button>
</article>
<article class="parent2">
<button class="btn2">버튼2</button>
</article>
<script>
const parent = document.querySelector('.parent');
const btnFirst = document.querySelector('.btn');
const btnSecond = document.querySelector('.btn2');
// 버튼 1 true => 캡쳐링 이벤트 => window-document-parent-btnFirst
// 버튼 2 true => 캡쳐링 이벤트 => window-document-btnSecond
// 버튼 1 true x => 버블링 이벤트 => btnFirst-parent-document-window
// 버튼 2 true x => 버블링 이벤트 => btnSecond-document-window
btnFirst.addEventListener('click', (event) => {
console.log("버튼1임");
}, true)
btnSecond.addEventListener('click', () => {
console.log('버튼2임!');
}, true);
window.addEventListener('click', () => {
console.log("윈도우임!");
}, true); // true : 캡처링 단계의 이벤트가 발생하도록 합니다.
document.addEventListener('click', () => {
console.log("문서임!");
}, true);
parent.addEventListener('click', () => {
console.log("부모임!");
}, true);
</script>
</body>
</html>true = 캡처링
캡처링은 가장 상위 노드부터 이벤트 발생(ex. click) 노드까지 타고 내려오는것 버블링은 이벤트 발생 노드에서 상위노드까지 돌아가는 것 버블링이벤트가 디폴트값
트루값이 있는 친구들은 먼저 출력되고 버블링이 나중이라서
클릭 => /(스탑)/ =>이벤트 출력 막힘
=> 출력할 수 없다.
+ 위의 예제를 바꿔가보면서 흐름 파악해보기
오늘 알게 된 것
💡 자연스럽게 썼던 이벤트들이 알고보면 다 순서가 있었다. 3번째 매개변수는 다소 충격이었다.
더 공부해야할 것
💡 preventDefault(), stopPropagation() 이 두 개가 이벤트의 전파와 관련있는데 예제를 만들면서 해봐야겠다.
'TIL' 카테고리의 다른 글
| 냅다 외우기 :: [JS] 소수판별 (0) | 2022.06.20 |
|---|---|
| 발표 절대 못 한다던 내가 첫 연사를 마친 소감 (0) | 2022.06.09 |
| TIL 33 :: SelectBox <select>없이 구현하기 (0) | 2022.05.16 |
| TIL 30 :: JS 함수는 하나인데 이름은 3개(기본, 화살표, 익명) (0) | 2022.05.10 |
| TIL 29 :: [JS] 반복문 (0) | 2022.05.09 |