반응형
자식요소에 이벤트가 발생할 때,
부모요소와 영역이 겹치면 자식요소에 이벤트가 발생한 후
부모요소의 이벤트도 발생한다.
아래에서 부터 위로 방울이 올라가는 것처럼 보인다해서
버블링이라고 한다.
예시로 보여주면
예시
<!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">
<link rel="stylesheet" href="./test.css">
<title>test</title>
</head>
<body>
<section>
<ul>
<li onclick="alert('li 에요')">lilililili</li>
</ul>
</section>
<script src="./test3.js"></script>
</body>
</html>인라인으로 이벤트를 줘서 보기 불편하시다면 죄송합니다. 보여주기용 으로 잠깐 쓰겠습니다.
section 안에 ul 안에 li에 클릭 이벤트를 줬다.
잘 반응하는 모습이다
section 안에 ul 에다가도 클릭 이벤트를 줘봤다.
<!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">
<link rel="stylesheet" href="./test.css">
<title>test</title>
</head>
<body>
<section>
<ul onclick="alert('ul 에요')">
<li onclick="alert('li 에요')">lilililili</li>
</ul>
</section>
<script src="./test3.js"></script>
</body>
</html>li를 클릭했더니
두번 알림창이 떳다.
이번엔 section 에다가도 줘봤다.
<!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">
<link rel="stylesheet" href="./test.css">
<title>test</title>
</head>
<body>
<section onclick="alert('section 에요')"">
<ul onclick="alert('ul 에요')">
<li onclick="alert('li 에요')">lilililili</li>
</ul>
</section>
<script src="./test3.js"></script>
</body>
</html>li를 클릭해봤다.
최하위 요소부터 순서대로 이번엔 알림창이 3번 떴다.
이게 이벤트 버블링이다.
버블링을 막기위한 해결방안 역시 있다.
stopPropagation() 라는 매서드인데
해당 요소를 제외한 상위요소의 이벤트를 방지해준다.
const li = document.querySelector('li');
li.addEventListener('click', function(e){
e.stopPropagation();
})li에 적용했다.
적용 후 li를 클릭해보니
알림창이 li 하나만 떴다.
부모요소들은 잘 방지된 모습이다.
반응형
'javascript' 카테고리의 다른 글
| 자바스크립트 비동기 콜 스택(callstack) , 콜 백(callback) (0) | 2023.04.03 |
|---|---|
| 자바스크립트로 jquery siblings (0) | 2023.03.31 |
| 자바스크립트 preventDefault() (0) | 2023.03.30 |
| 자바스크립트 구조 분해 할당 (0) | 2023.03.27 |
| 자바스크립트 스프레드 연산자 (0) | 2023.03.27 |
