미미 공부/취미방

Javascript 버블링, 캡쳐링 본문

Programming

Javascript 버블링, 캡쳐링

mionager 2022. 11. 19. 17:19

캡쳐링(Capturing)

부모에서 자식들에게 내림으로 이벤트가 퍼지는 것을 캡쳐링이라고 한다.
비유적으로 예를 들자면,
과자가 4겹으로 봉지에 쌓여있다고 치자. (과자봉지 = 이벤트) 제일 안쪽의 봉지를 까기 위해서, 밖에서 부터 봉지를 까야하듯이
나는 제일 안쪽 요소(증손자 요소)를 눌렀지만
부모 이벤트 실행,
자식 이벤트 실행,
손자 이벤트 실행,
증손자 이벤트 실행
이렇게 차례로 이벤트가 실행되어 내려간다.
자식 이벤트를 클릭한다면,
부모 이벤트 실행,
자식 이벤트 실행
끝
이런 식으로 이벤트 실행이 퍼져나간다.

버블링(Bubbling)

자식에서 부모들에게 올림으로 이벤트가 퍼지는 것을 버블링이라고 한다.

이벤트가 퍼지는 방향이 캡쳐링과 반대로 퍼진다.
증손자
손자
자식
부모

캡쳐링 혹은 버블링 결정하기

캡쳐링 버블링은 addEventListner의 세 번째 인자에 boolean 값으로 결정할 수 있다.
캡쳐링(부모 -> 자식)을 일으킬 경우 ‘true’
버블링(자식 -> 부모)을 일으킬 경우 ‘false’

target.addEventListener(‘click’, function() {}, true(or false));


캡쳐링과 버블링을 활용해서 코드를 짜는 경우가 있는데
캡쳐링은 옛날 브라우저에서는 지원하지 않는다고 한다.

event.stopPropagation()

캡처/버블링을 활용할 때, 이 퍼져나가는 것을 멈추기 위해서 even.stopPropagation()를 사용할 수 있다.
(event.stopImmediatePropagation()이라는 것도 있는데 차이점은 차차 알아가 보자)

<body>
	<fieldset>
		<legend>event propagation</legend>
		<input id=“target” value=“target” type=“button” />
	</fieldset>
</body>


// addEventListner의 세 번째 인자가 false로 bubbling이 되는 상황

body.addEventListner(‘click’, function() {
	console.log(‘body’);
}, false);

fieldset.addEventListener(‘click’, function(e) {
	console.log(‘fieldset’);
	e.stopPropagation();
}, false);

input.addEventListener(‘click’, function() {
	console.log(‘input’);
}, false);


bubbling 때문에 이벤트가 INPUT > FIELDSET > BODY 순서로 실행되어야 하지만
FIELDSET에 event.stopPropagation()이 있기 때문에 INPUT > FIELDSET 끝이다.


참고 : https://opentutorials.org/course/1375/6768

이벤트 전파(버블링과 캡처링) - 생활코딩

HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록 되어 있다면 어떻게 처리 될

opentutorials.org

'Programming' 카테고리의 다른 글

[Javascript] array.map() / array.filter()  (0) 2023.01.25
[bootstrap] 이중 모달 Modal 해결  (1) 2022.12.10
[JavaScript] input radio 내 디자인 스크립트 기능 구현  (0) 2022.11.11
Javascript 애니메이션 라이브러리 : GSAP  (0) 2022.10.21
Javascrip 객체 지향 프로그래밍 : 객체 간의 상속  (0) 2022.10.04
'Programming' Related Articles more
Comments