e.preventDefault() 와 e.stopPropagation() 의 차이

e.preventDefault() 와 e.stopPropagation() 는 이벤트 관련 동작에서 많이 사용되는 코드이다.

 

e.preventDefault()

e.preventDefault() 는 a 태그나 submit 처럼 페이지를 이동시키거나 form 태그의 submit 하는 동작을

중지시킨다.

 

// javascript
$("a").click(function(e){
	e.preventDefault();
    alert('prevnetDefault 로 인해 이벤트 중지');
});

// html
<a href="https://www.naver.com">네이버 페이지 이동</a>

 

위처럼 "네이버 페이지 이동" 이라는 a 태그의 링크를 클릭하면 click 이벤트 함수가 발생하고 e.preventDefault() 로

인해 이벤트가 중지된다.

 

e.stopPropagation()

e.stopPropagation() 이벤트 함수는 상위 엘리먼트들로의 이벤트 전파를 막아준다.

 

아래 예시를 확인하자.

//javascript
$(".click_element").click(function(e){
	e.stopPropagation();
	alert("click_element CLICK");
});
$(".third_element").click(function(){
	alert("third_element CLICK");
});
$(".second_element").click(function(){
	alert("second_element CLICK");
});
$(".first_element").click(function(){
	alert("first_element CLICK");
});

//html
<div class="first_element">
	<ul class="second_element">
    	<li class="third_element">
        	<div class="click_element">CLICK EVENT</div>
        </li>
    </ul>
</div>

 

위 소스에서 "e.stopPropagation" 이벤트 함수가 없을때 "CLICK EVENT" 를 클릭하면 click_element Click 이벤트 함수 뿐만이 아니라 상위 엘리먼트들인 first_element, second_element, third_element 이벤트도 발생한다.

 

이럴때 "e.stopPropagation()" 이벤트 함수를 통해 상위 엘리먼트들은 이벤트가 발생하지 않도록 할 수 있다.

 

 

요약

• e.preventDefault() : 이벤트를 중단시킨다.
• e.stopPropagation() : 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.(클릭하는 이벤트만 발생)