<!DOCTYPE html>
<html lang="en">
<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</title>
<style>
.outer, .middle, .inner1, .inner2 {
display: block;
width: 520px;
padding: 15px;
margin: 15px;
text-decoration: none;
}
.outer {
border: 1px solid red;
color: red;
}
.middle {
border: 1px solid green;
color: green;
width: 460px;
}
.inner1, .inner2 {
border: 1px solid purple;
color: purple;
width: 400px;
}
</style>
</head>
<body>
<div class="outer">
바깥, 일회용 & 다회용
<div class="middle" target="_blank">
중간, 캡처 & 비 캡처
<a class="inner1" href="https://www.mozilla.org" target="_blank">
내부 1, 패시브 & (허용되지 않은) preventDefault
</a>
<a class="inner2" href="https://developer.mozilla.org/" target="_blank">
내부 2, 비 패시브 & preventDefault (새 페이지가 열리지 않음)
</a>
</div>
</div>
</body>
<script>
const outer = document.querySelector('.outer');
const middle = document.querySelector('.middle');
const inner1 = document.querySelector('.inner1');
const inner2 = document.querySelector('.inner2');
const capture = {
capture : true
};
const noneCapture = {
capture : false
};
const once = {
once : true
};
const noneOnce = {
once : false
};
const passive = {
passive : true
};
const nonePassive = {
passive : false
};
outer.addEventListener('click', onceHandler, once);
outer.addEventListener('click', noneOnceHandler, noneOnce);
middle.addEventListener('click', captureHandler, capture);
middle.addEventListener('click', noneCaptureHandler, noneCapture);
inner1.addEventListener('click', passiveHandler, passive);
inner2.addEventListener('click', nonePassiveHandler, nonePassive);
function onceHandler(event) {
alert('바깥, 일회용');
}
function noneOnceHandler(event) {
alert('바깥, 다회용, 기본 값');
}
function captureHandler(event) {
//event.stopImmediatePropagation();
alert('중간, 캡처');
}
function noneCaptureHandler(event) {
alert('중간, 비 캡처, 기본 값');
}
function passiveHandler(event) {
// 패시브 수신기 내에서는 preventDefault 사용 불가
event.preventDefault();
alert('내부 1, 패시브, 새 페이지 열림');
}
function nonePassiveHandler(event) {
event.preventDefault();
//event.stopPropagation();
alert('내부 2, 비 패시브, 기본 값, 새 페이지 열림');
}
</script>
</html>
댓글 영역