[JavaScript] e.preventDefault()와 stopPropagation()의 차이

e.preventDefault()와 stopPropagation()의 차이에 대해 알아보자

1. e.preventDefault()와 stopPropagation()

• 두 개의 이벤트 함수들은 주로 JavaScript를 이용해 웹 프로그래밍을 할 때 자주 사용되는 함수
• e : 이벤트 객체를 의미

2. e.preventDefault()

• 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드
• 브라우저 고유의 동작을 중단시켜주는 역할

<a>, <input>, <textarea>의 기본 동작을 막을 수 있음

<a href="http://naver.com" id="link">네이버 홈으로 이동</a>
<script>
	$(document).on('click', '#link', function(e) {
			e.preventDefault();
	});
	// a 태그 클릭 시 링크값이 있어도 이동하지 않음
</script>

3. stopPropagation()

• 부모 엘리먼트에게 이벤트 전달을 중단해야 할 때 사용
• 이벤트가 상위 DOM으로 전달(전파)하지 않도록 하는 메서드