©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript EventListener Call</title>
	<style>
		#divBox { width: 100%; height: 100px; border: 2px solid red; }
		#paraBox { width: 80%; height: 50px; border: 2px solid orange; }
		#linkBox { border: 2px solid green; }
	</style>
</head>

<body>

	<h1>이벤트 전파의 취소</h1>
	<div id="divBox">
		<p id="paraBox">박스 안의 여러 곳을 <a id="linkBox" href="/javascript/intro">클릭</a>해 보세요!</p>
	</div>
	<p id="text"></p>

	<script>
		// 각 요소마다 버블링 방식으로 click 이벤트 리스너를 등록함.
		document.getElementById("divBox").addEventListener("click", clickDiv);
		document.getElementById("paraBox").addEventListener("click", clickPara);
		document.getElementById("linkBox").addEventListener("click", clickLink);
		
		function clickDiv(event) {
			document.getElementById("text").innerHTML += "div 요소를 click 하셨네요!<br>";
		}
		function clickPara(event) {
			document.getElementById("text").innerHTML += "p 요소를 click 하셨네요!<br>";
		}
		function clickLink(event) {
			event.preventDefault();		// 링크의 기본 동작을 취소함.
			document.getElementById("text").innerHTML += "링크의 기본 동작을 막았어요!<br>";
			event.stopPropagation();	// 이벤트의 전파를 취소함.
			document.getElementById("text").innerHTML += "이벤트의 전파를 막았어요!<br>";
		}
	</script>
		
</body>

</html>