JavaScript

이벤트 버블링과 캡쳐링

ㅇㄱ9 2022. 5. 8. 17:00
728x90

이벤트 흐름

표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다.

  1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
  2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
  3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

[출처]https://ko.javascript.info/bubbling-and-capturing

이벤트 버블링 

: 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성

[출처]https://velog.io/@soulee__/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90-%EC%9C%84%EC%9E%84

div 태그 한 개만 클릭했을 뿐인데 3개의 이벤트가 발생되는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다.

브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.

 

focus 이벤트를 포함한 몇몇 이벤트를 제외하고 거의 모든 이벤트는 버블링 된다. 

 

이벤트 캡쳐링

: 이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다. (이벤트 리스너를 등록할 때 capture : true를 설정)

[출처]https://velog.io/@soulee__/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90-%EC%9C%84%EC%9E%84

 

위 그림처럼 특정 이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그를 찾아 내려간다.

 

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // default 값은 false입니다.
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

 

이벤트 중단

- e.preventDefault()

: element 태그 고유의 동작(ex) a태그의 페이지 이동, submit태그의 form태그 안의 input 전송)을 중단. 

<html>
    </head>
        <script type="text/javascript">
            function stopDefaultAction(e) {
               e.preventDefault();
            }
    </script>
    </head>
    <body>
        <a href="https://ifuwanna.tistory.com" onclick="stopDefaultAction(event);">페이지이동</a>
    </body>
</html>

 

- e.stopPropagation()

: 상위, 하위 엘리먼트들로의 이벤트 전파를 중단시킴. 즉, 버블링, 캡쳐링을 막는 함수

<html>
<head>
<script>
	function alertInnerDiv(e){
		e.stopPropagation(); //주석 처리시 부모엘리먼트(outerDiv)로 이벤트가 전파되어 alertOuterDiv()까지 호출
		alert("click InnerDiv");
	}
	function alertOuterDiv(){
		alert("click outerDiv");
	}
	window.onload = function() { 
		var innerDiv = document.getElementById("innerDiv");
		var outerDiv = document.getElementById("outerDiv");
		innerDiv.addEventListener("click", alertInnerDiv, false);
		outerDiv.addEventListener("click", alertOuterDiv, false);
	}
</script>
</head>
<body>
	<div id="outerDiv">
		<div id="innerDiv">innerDiv</div>
	</div>
</body>
</html>

 

- e.stopImmediatePropagation()

: 한 요소의 특정 이벤트를 처리하는 핸들러가 여러 개인 상황에서 버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막는 함수.

이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다.

 

 

--- 참고 사이트

- [JavaScript] 이벤트 버블링, 캡쳐링, 위임

- [개념잡기] e.preventDefault()와 stopPropagation()의 차이

- 버블링과 캡쳐링

- Does stopPropgation stop the event from propagating in the capture phase?

- Event Bubbling and Capturing in JavaScript​

 

 

728x90
반응형