[JS/JQ] preventDefault() & stopPropagation()

 

 

preventDefault() & stopPropagation()

 

preventDefault() : 기본 이벤트의 실행을 막아줍니다.

네이버 이동

<div>
	<div id="box">
		<a href="http://www.naver.com/"id="alert0" target="_blank">네이버 이동</a>
	</div>
</div>

$("#alert0").click(function(e){
   e.preventDefault(); //이벤트 실행을 막음
});

preventDefualt() 메서드로 인해 네이버로 이동하지 않습니다.

---

stopPropagation() : 이벤트 객체의 버블링을 제거해주는 중요한 메서드입니다.

이벤트 버블링이란 부모요소와 자식요소 모두 이벤트가 연결되어 있는 경우 자식요소의 이벤트를 실행했을때 부모요소의 이벤트 또한 같이 실행되는 현상으로 stopPropagation() 메서드를 이용해서 이를 방해야합니다.

알림창

$("#box").click(function (){
    $(this).css({'background' : "#fe7171"}); 
    //흰색 박스 내부를 클릭했을때 배경색 변경
})

$("#alert").click(function(){
    alert("Click!"); //"알림창"을 클릭했을때 알림창 표시
});

흰색 박스 내부를 클릭하면 배경색이 변경되는 코드와 "알림창" <a>요소를 클릭하면 알림창이 뜨는 코드입니다.

여기서 알림창을 클릭하면 흰색 박스의 배경까지 변경되는 현상이 발생됩니다. 이벤트 버블링 효과입니다.

이 문제를 해결하기 위해서는 아래와 같이 코드를 작성해야 합니다.

알림창

$("#box2").click(function (){
    $(this).css({'background' : "#fe7171"});
    //흰색 박스 내부를 클릭했을때 배경색 변경
})

$("#alert2").click(function(e){
    alert("Click!");  //"알림창"을 클릭했을때 알림창 표시
    e.stopPropagation(); //버블링 제거
});

stopPropagation() 메소드로 버블링 현상이 제거되어 알림창을 클릭했을때 흰색 박스의 배경색이 변경되지 않습니다.