티스토리 뷰

[JS] 이벤트 캡처링(capturing)과 버블링(bubbling)

JoonPyo-Hong 2021. 7. 16. 14:35
반응형
버블링은 안쪽 요소 부터 이벤트가 발생한다.
<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 -> body 가 alert 출력된다.

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 출력된다.

 

반응형

'[JS]' 카테고리의 다른 글

[JS] disabled, readonly 사용법과 차이점  (8) 2021.07.28
[JS] jQuery is not defined, $ is not defined 오류  (1) 2021.07.27
[JS] 문자열 공백 제거하기 (trim, replace, 정규식)  (0) 2021.07.25
[JS] 태그 속성값 (attr, prop)  (0) 2021.07.19
[JS] 동적으로 생성된 태그 이벤트  (2) 2021.07.17
댓글
반응형