0. 문제 원인
- 리액트 블로그 프로젝트 중 자식 태그인 Delete 버튼만 눌렀을 뿐인데 부모태그에 적용된 onClick 이벤트가 같이 발생했다. Delete 버튼을 눌렀을 때 Delete 버튼에 적용된 onClick 이벤트인 콘솔창에 '버튼삭제' 글자만 띄우고 싶었는데
그 부모태그인 edit 페이지로 이동하는 이벤트까지 작용되었다.
1. 왜 자식태그를 눌렀는데 부모태그까지 적용돼? 이벤트 버블링
<이벤트 버블링 예시>
<!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>이벤트 버블링</title>
<style>
.parent {
width: 200px;
height: 200px;
background-color: blue;
}
.child {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body onclick="body1()">
<div class="parent" onclick="parent()">
<div class="child" onclick="child()"></div>
</div>
<script>
function body1() {
console.log("body");
}
function parent() {
console.log("parent");
}
function child() {
console.log("child");
}
</script>
</body>
</html>
아래 gif 를 보면
나는 body 부분을 클릭했을때는 콘솔창에 body 만 나온다.
헌데, parent 부분을 클릭하면 parent, body가 같이뜨고
child 부분을 클릭하면 child,parent,body 까지 같이 콘솔창에 뜬다.
왜 자식 태그만 눌렀는데 부모태그까지 이벤트가 영향을 미치지??
child를 클릭했을 때 parent 부분에 이벤트가 없다면 parent부분은 스킵하고 child, body만 콘솔창에 뜬다.
왜 이런일이 발생하는걸까?
2. 이벤트 버블링 뜻
이벤트가 하위요소에서 상위 요소 방향으로 전파 되는 것
3. 이벤트 버블링 막는 법, event.stoppropagation()
event.stoppropagation() : 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다.
가장 맨 아래 자식태그에 event.stoppropagation을 적용시키다.
그러면 더이상 이벤트 전파가 되지않는다.
즉, child 를 눌렀을 때 콘솔창에 child 만 표시된다.
'프론트엔드 개발 > JavaScript' 카테고리의 다른 글
| 자바스크립트) 배열 원소 누적 합 구하기 (0) | 2023.02.28 |
|---|---|
| 자바스크립트) 원시타입 VS 참조타입 / 얕은복사 VS 깊은 복사 (0) | 2023.02.03 |
| 자바스크립트 기초) truthy, falsy, 단축 평가(단락회로평가) (0) | 2023.01.28 |
| 자바스크립트 기초) 배열, 객체 구조 분해 할당 (0) | 2022.12.01 |
| 자바스크립트) Promise 쓰기 귀찮을 땐 async, await (0) | 2022.11.29 |