[Javascript] event preventDefault() stopPropagation() 차이점

preventDefault(),stopPropagation()는 Event 인터페이스에서 제공하는 메서드 입니다. DOM 내에 위치한 요소들은 Event 인터페이스를 통해 이벤트 관련 다양한 속성과 메서드를 제공받아 이벤트를 수신 받고 받은 이벤트를 처리하는 코드를 실행할 수 있습니다.

Event 인터페이스 관련 자세한 정보는 아래 문서를 참고하시면 도움이 되실 것 같네요.

https://developer.mozilla.org/ko/docs/Web/API/Event

| event.preventDefault()

기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 <a> <submit> <button> 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다.

아래의 예제를 보면 “페이지이동” 클릭시 기본 <a>태그의 페이지 이동 이벤트 발생을 막아 페이지가 이동되지 않는 것을 확인 하실 수 있습니다.

<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>

| event.stopPropagation()

전파(Propagation)를 중지한다(stop)라는 의미 처럼 상위 엘리먼트로의 이벤트 전파(이벤트 버블링)을 막기 위한 메서드입니다.

자바스크립트의 이벤트는 가장 하위 뎁스의 엘리먼트부터 실행되고 상위로 전파되는 방식으로 실행됩니다. 만약 이벤트가 전파되어 상위엘리먼트에서 발생한 이벤트가 하위엘리먼트에서 발생한 이벤트 결과에 의도치 않은 결과를 주는 경우 자주 사용합니다. 예를 들어 실무에서 개발시 마크업 영역에서 퍼블리셔 분들이 적용해놓은 상위 엘리먼트의 이벤트로 인해서 원하지 않은 결과가 나오는 경우 사용할 수 있습니다.

아래 예제에서 innerDiv 클릭시 alertInnerDiv() > alertOuterDiv() 이벤트순으로 전파되어 2번의 alert이 떠야하지만 alertInnerDiv() 에서 사용된 e.stopPropagation()가 부모 엘리먼트로의 이벤트 전파를 막아 “click InnerDiv” alert 한 번만 실행 되는 것을 확인 하실 수 있습니다.

<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>

저작자표시 비영리 동일조건

'Program > Javascript, JQuery' 카테고리의 다른 글

[Javascript] 느낌표 두개(!!) 사용법 (논리 연산자) (1)	2020.11.05
[JQuery] 반복문 each break / continue 사용법 (1)	2020.02.27
[Javascript] submit 인코딩 캐릭터셋 변경, 한글 깨짐 처리( euc-kr / utf-8 ) (2)	2019.11.13
[Javascript/Jquery] form, input 동적 생성 및 submit (1)	2019.11.11
[Javascript] 뒤로가기 막기, 뒤로가기 이벤트 제어 ( pushState / popstate ) (0)	2019.11.08

IfUwanna IT