해온의 우당탕 개발일지

Programing Language/Javascript

[Javascript] preventDefault()와 stopPropagation()

jheaon ・ 2023. 3. 21. 00:04



📚 preventDefault()

 

 

어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정하는 함수를 의미한다. 예를 들어 <a> 태그나 <submit> 태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 혹은 이동하는 기능을 가지고 있으나 의도치 않게 사용될 경우가 있을 수 있기 때문에 Event.preventDefault() 를 사용한다.

 

 

 

 

 📒 <a> 태그에서의 사용 예제

<a href="https://jheaon.tistory.com/" id="link">해온의 블로그</a>

<script>
	document.querySelector('#link').addEventListener('click', function(e){
		e.preventDefault();
	});
	// a 태그 클릭 시 preventDefault를 사용했기 때문에 링크값이 있어도 이동하지 않는다.
</script>

 

 

 📒 <submit> 태그에서의 사용 예제

const onLoginSubmit = (e) => {
  e.preventDefault();
  
  loginForm.classList.add("hidden");
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username);
}

 

 

📚 preventDefault()와 stopPropagation()

 

Javascript에서 이벤트 실행 제어를 하는 방법은 preventDefault() 말고도, stopPropagation()이 존재하는데 이는 이벤트 버블링을 중단 할 수 있다는 점에서의 차이점이 있다. 

 

 

 

🔖 이벤트 버블링(Event Bubbling)

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

// html
<body>
	<div class="one">
		<div class="two">
			<div class="three">
			</div>
		</div>
	</div>
</body>
// javascript
const divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent);
});
function logEvent(event) {
	console.log(event.currentTarget.className);
}​


이렇게 3개의 div 태그에 클릭시 logEvent를 발생시키는 함수를 등록하고 최하위 div 태그를 누르면 다음과 같이 실행되는 것을 확인 할 수 있다. 

three
two
one


div 태그 하나만 클릭 했을뿐인데, 3개의 이벤트가 발생하는 이유는 브라우저가 이벤트를 감지하는 방식 때문인데, 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때, 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. 이와 같이 하위에서 상위요소로의 이벤트 전파 방식을 "이벤트 버블링" 이라고 한다. 

 

 

 

 

정리하자면 preventDefault()는 단순히 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드라면, stopPropagation()은 말 그대로 상위 엘리먼트로의 이벤트 버블링을 막는다는 것에서 차이가 있다는 것을 확인 할 수 있다.

저작자표시

'Programing Language > Javascript' 카테고리의 다른 글

[Javascript] Local Storage 다루기  (0) 2023.03.21
[Javascript] classList 정의와 사용방법  (0) 2023.03.21
[Javascript] event listener 사용하는 법과 event 의 종류  (0) 2023.03.20
[Javascript] getElement*, querySelector*로 요소 접근하기  (0) 2023.03.18
[Javascript] undefined, null 의 정의와 차이  (0) 2023.03.17

'Programing Language/Javascript'의 다른글

  • 현재글 [Javascript] preventDefault()와 stopPropagation()

관련글

티스토리툴바