event.preventDefault() 와 event.stopPropagation() 는 Event인터페이스에서 제공하는 메서드로, 두 메서드 모두 이벤트를 중단시킨다. 각 메서드는 무엇이며, 차이점은 무엇인지 알아보자.
Q1. event.preventDefault란 무엇이며 언제 사용하는가
**event.preventDefault() 은 기본(default)을 막다(prevent)의 단어에서 유추할 수 있듯이, html에서 표준으로 제공하는 태그의 기본 이벤트를 막는 메서드이다.
Javascript의 앵커태그인 <a> , <submit> , <button> 와 같은 몇몇 태그들은 특수한 기능을 갖고 있다.
먼저 <a> 태그는 href에 연결된 링크를 통해 해당 페이지로 이동하는 기능을 가지고 있고, <submit>태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침하는 기능을 가지고 있다. 이러한 기능들은 매우 유용하지만, 그 의도로 사용하지 않게 될 경우 불편이 발생한다.
이때 event.preventDefault() 메서드를 통해 해당 이벤트의 발생을 막을 수 있다.
Q2. event.preventDefault는 어떻게 사용할까
event.preventDefault() 는 <a>와 <submit>와 같은 몇몇 태그의 고유의 동작을 중단시킨다.
<a>에event.preventDefault()사용→
<a>태그에 링크 값이 있어도event.preventDefault()로 인해 클릭 시 이동하지 않는다.
<a href="https://github.com/Kyeom1997" id="link">심효은의 깃허브</a>
<script>
document.querySelector('#link').addEventListener('click', function(e){
e.**preventDefault();**
});
</script>
<submit>에event.preventDefault()사용→
<submit>테그를 클릭해도event.preventDefault()로 인해 제출 후 새로고침되지 않는다.
const onLoginSubmit = (e) => {
e.preventDefault();
loginForm.classList.add("hidden");
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}Q3. 그럼 event.stopPropagation은 무엇일까?
event.stopPropagation() 는 전파(Propagation)를 중지한다(stop)라는 의미처럼 상위 엘리먼트로의 이벤트 전파(이벤트 버블링)을 막기 위한 메서드이다.
“ 자바스크립트의 이벤트는 가장 하위 뎁스의 엘리먼트부터 실행되고 → 상위로 전파되는 방식으로 질핸된다. 만약 이벤트가 전파되어 상위 엘리먼트에 발생한 이벤트가 하위 엘리먼트에서 발생한 이벤트 결과에 의도치 않은 결과를 주는 경우 자주 사용한다. 예로 실무에서 개발시 마크업 영역에서 다른 개발자가 적용해놓은 상위 엘리먼트의 이벤트로 인해 원하지 않은 결과가 나올경우 사용할 수 있다. “
이벤트 버블링(Event Bubbling)이란?
→ 특정 화면 요소에서 이벤트가 발생했을 때 : 해당 이벤트가 더 상위의 화면요소들로 전달되는 특성을 말한다.
//예시코드 : 3개의 div태그 클릭 시 logEvent를 함수를 등록하고, 최하위 div 태그를 누르면 console.log가 실행되는 코드이다. <body> <div class="one"> <div class="two"> <div class="three"> </div> </div> </div> </body> const divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className);
- 결과 :
<div>태그 한개만 클릭했음에도 3개의 이벤트가 발생해 → ‘three’ | ‘two’ | ‘one’ 이 순서대로 출력된다.- 왜일까 ? : “브자우저가 이벤트를 감지하는 방식” 때문이다.
브라우저는 특정 화면 요소에서 이벤트가 발생했을때 -> 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. = 정리하면, 이벤트 버블링"이란 하위요소에서 상위 요소로의 이벤트 전파 방식을 말한다.
Q4. 총정리 및 차이점
event.preventDefault() 는 HTML에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드이고, event.stopPropagation()는 상위 엘리먼트로의 이벤트 버블링을 막는 메서드이다.
만약 이벤트가 상위 DOM으로 전파되지 않게 하고 싶다면 event.stopPropagation() 를 사용하는 것이 적절하다.
➕ 추가
event.preventDefault() : 기본적인 클릭 동작만 막고 + 외부에서 들어온 동작을 직접적으로 막진 않는다.
event.stopPropagation() : 링크나 버튼의 클릭을 막진 못하고 + 상위 태그까지의 전파를 막는다.
참고자료
https://ifuwanna.tistory.com/289
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
https://pa-pico.tistory.com/20
https://develop-sense.tistory.com/71
https://velog.io/@hang_kem_0531/JS-event.preventDefault-알아보기
