[Javascript] event.preventDefault() 와 event.stopPropagation()

event.preventDefault()와 event.stopPropagation()에 대해 알아보자

 

 

 

[ event.preventDefault() ]

event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 

 

주로 사용되는 경우를 나열하자면,

 

1. 페이지를 이동시키는 a 태그를 눌렀을 때 이동을 막음

 

★ 2. form 태그 안에 submit 역할을 하는 버튼을 눌러도, submit은 작동하되 새로 실행되지는 않게 함 

 

2번의 경우 내가 행한 event에 대해 (여기서는 submit) preventDEfault를 해주지 않았기 때문에 
submit 됨과 동시에 창이 다시 실행되서 초기 화면으로 돌아오기 때문 

즉, submit 함으로 내가 다른 결과를 보이고 싶을 때, ( 예를 들면 submit 버튼을 누르면 
"제출 완료!" 라는 문구 생성 ) preventDefault 메서드를 사용하여 창이 다시 실행되는 것을 막는다.

 

 

※ 구문 

event.preventDefault();

 

 

※ 예제 

 

기본 클릭 동작 방지하기

 

체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것이다.

아래 예제는 체크박스의 클릭 기본 동작을 방지한다. 

 

 

JavaScript

 

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
         event.preventDefault();
}, false);

 

 

HTML

 

<p>체크박스를 클릭해주세요.</p>

<form>
  <label for="id-checkbox">체크박스:</label>
  <input type="checkbox" id="id-checkbox"/>
</form>

<div id="output-box"></div>

 

 

※ 결과

 

체크박스를 클릭해주세요.

체크박스:

 

※ 결론

 

이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소한다. 

즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않는다. 

 

 

---

 

 

[ event.stopPropagation() ] 

event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지한다. (상위 태그까지의 전파를 막는다.)

 

※ 구문 

event.stopPropagation();

 

※ 예제 

 

alert 방지

 

 

JavaScript

 

const last = document.querySelector('.last-el');

last.addEventListener('click', () => {
  alert('last-el');
})

const third = document.querySelector('.third-cover');

third.addEventListener('click', () => {
  alert('third-cover');
})

const second = document.querySelector('.second-cover');

last.addEventListener('click', () => {
  alert('second-cover');
})

const first = document.querySelector('.first-cover');

first.addEventListener('click', () => {
  alert('first-cover');
})

 

 

HTML

 

<div class="first-cover">
  <ul class="second-cover">
    <li class="third-cover">
      <div class="last-el">event</div>
    </li>
  </ul>
</div>

 

 

※ 결과

 

• event

 

위의 코드에서 "last-el" 이라는 클래스를 가진 div를 클릭했는데 부모 태그에게도 이벤트가 전파된다. 

 

이때 사용하는 것이 e.stopPropagation 이다. e.stopPropagation는 이벤트가 상위 태그에 전달되지 않게 막아 준다.

 

 

JavaScript

 

const last = document.querySelector('.last-el');

last.addEventListener('click', (event) => {
  event.stopPropagation();
  alert('last-el');
})

const third = document.querySelector('.third-cover');

third.addEventListener('click', () => {
  alert('third-cover');
})

const second = document.querySelector('.second-cover');

last.addEventListener('click', () => {
  alert('second-cover');
})

const first = document.querySelector('.first-cover');

first.addEventListener('click', () => {
  alert('first-cover');
})

 

 

※ 결과

 

• event

 

※ 정리

event.preventDefault :  고유 동작을 중단시킨다. 

event.stopPropagation  : 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.

 

REF : 

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

https://programming119.tistory.com/100

https://pa-pico.tistory.com/20