<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
div {
margin: 50px;
padding: 50px;
}
.d1 {
background-color: yellow;
}
.d2 {
background-color: red;
}
.d3 {
background-color: green;
}
</style>
<div class="d1">
<div class="d2">
<div class="d3">
<a class="btn" href="https://www.naver.com">네이버</a>
</div>
</div>
</div>
<script>
document.querySelector(".d1").addEventListener("click", function(e) {
alert("D1")
}, false)
document.querySelector(".d2").addEventListener("click", function(e) {
alert("D2")
}, false)
document.querySelector(".d3").addEventListener("click", function(e) {
alert("D3")
}, false)
document.querySelector(".btn").addEventListener("click", function(e) {
//e.stopPropagation() //이벤트 전파를 막는다
//e.preventDefault() //기본 동작을 막는다.
alert("BTN")
}, false)
</script>
</body>
</html>*버블링
alert 순서 BTN -> D3 -> D2 -> D1 -> 네이버 이동
e.stopPropagation()실행시 이벤트의 전파를 막아서 alert BTN만 뜨고 네이버로 이동
e.preventDefault()태그의 기본 동작을 막음
캡처링은 조금더 이해가 필요할듯하다.
다행히 캡처링의 경우 많이 사용하지는 않는듯하다.
*참고
버블링과 캡처링
ko.javascript.info
'자바스크립트' 카테고리의 다른 글
| 구조 분해 할당 (0) | 2021.11.16 |
|---|---|
| 자바스크립트 Event Target (0) | 2021.11.16 |
| 구글맵 API 사용 테스트 (0) | 2021.11.14 |
| 자바스크립트 : 알아야 될 용어정리 (0) | 2021.11.13 |
| Undefined 이해하기 (0) | 2021.11.11 |