티스토리 뷰

반응형
버블링은 안쪽 요소 부터 이벤트가 발생한다.
<style>
	body{
	width:30%;
	text-align:center;
	padding:5px;
	border: 1px solid blue;
	}

	#parent{
	padding:5px;
	border: 1px solid black;
	}

	#child{
	padding:5px;
	border: 1px solid red;
	}
</style>
<body>
	<div id="parent">
		<div id="child">
			클릭
		</div>
	</div>
<script>

const body = document.querySelector('body');
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

	body.addEventListener('click', () => {
		alert('body');
	});
	parent.addEventListener('click', () => {
		alert('parent');
	});
	child.addEventListener('click', () => {
		alert('child');
	});
	
</script>
</body>

작성된 화면

클릭 버튼을 누르면

child -> parent -> bodyalert 출력된다.


event.stopPropagation() 함수를 사용해서 버블링 중단을 할 수 있다.
<body>
	<div id="parent">
		<div id="child" onclick="event.stopPropagation()">
			클릭
		</div>
	</div>
</body>

child alert 출력된다.


캡처링은 바깥 요소 부터 이벤트가 발생한다.
<script>
	body.addEventListener('click', () => {
		alert('body');
	},true);
	parent.addEventListener('click',() => {
		alert('parent');
	},{capture: true});
</script>

{capture: true} 또는 true 를 사용해서 캡처링을 사용할 수 있다. 

 

body -> parent -> child alert 출력된다.

 

반응형
댓글
반응형