버블링이란?
'이벤트 버블링’ 이란 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았다고 하여 칭해진 이름이다.
다음과 같이 코드를 작성해주었다.
3개의 div태그를 중첩되게 만들어 주고(조부모 > 부모 > 나) 각각 이벤트 핸들러를 할당해 준다.
<style>
body * {
border: 2px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div onclick="alert('조부모')">조부모
<div onclick="alert('부모')">부모
<div onclick="alert('나')">나</div>
</div>
</div>
</body>
코드를 실행시키면 아래 화면과 같이 '나'를 클릭하면 할당된 alert 가 실행되고 바로 이어서 '부모'의 alert, 이어서 '조부모'의 alert 가 실행이 된다.
또 '부모'를 클릭하면 '부모' -> '조부모' 순으로 alert가 실행이 되고 '조부모'를 누르면 '조부모'의 alert만 실행이 된다.
이것은 바로 버블링의 원리 때문이다. 한 요소에 이벤트가 발생되면 이어서 부모 요소의 핸들러가 실행이 된다. 과정을 진행시켜 가장 최상단의 부모를 만날 때까지 진행된다.
버블링 중단하기
그렇다면 위와같은 버블링을 중단하는 방법에 대해서 알아보자.
이벤트 버블링(bubbling)은 내가 타깃 한 이벤트부터 document 객체를 만날 때까지 각 노드에서 모두 발생하고 핸들러가 할당이 되어있다면 모두 실행이 된다. 코드를 작성하면서 이렇게 되면 안 될 때가 있을 것이다. 그럴 때는 이벤트 객체 메서드event.stopPropagation()를 사용한다. 코드 사용법은 아래와 같다.
<style>
body * {
border: 2px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div onclick="alert('조부모')">조부모
<div onclick="alert('부모'), event.stopPropagation()">부모
<div onclick="alert('나')">나</div>
</div>
</div>
</body>
코드를 실행시키면 아까와는 다르게 '나'를 클릭하면 '나', '부모' 순으로만 alert가 실행이 되고
'부모'를 클릭하면 '부모'만 alert가 실행되는 것을 확인할 수 있다.
그 이유는 바로 event.stopPropagation() 메서드가 버블링 효과에 의해서 이벤트가 부모로 전달되어지는 것을 막고 있기 때문이다.
'Front-end School > JS' 카테고리의 다른 글
| [Javascript]얕은복사 깊은복사 (0) | 2023.01.14 |
|---|---|
| [Javascript]원시형과 참조형 (0) | 2023.01.12 |
| [Javascript] 요소 찾기 querySelector, querySelectorAll (0) | 2022.02.26 |
| [Javascript] - promise 메서드 then, catch, finally (1) | 2022.02.25 |
| [Javascript] DOM 기초 - HTML in Javascript (0) | 2022.02.18 |
