데굴데굴

<JavaScript> e.stopPropagation()과 e.preventDefault() 본문

Programming/JavaScript

<JavaScript> e.stopPropagation()과 e.preventDefault()

aemaaeng 2023. 2. 16. 18:27

참고 - 자바스크립트 Deep Dive, MDN

 

이벤트 입문 | MDN

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주

developer.mozilla.org

이벤트 전파와 이벤트 버블링, preventDefault()와 stopPropagation()의 차이가 궁금해져 정리해본 글이다.

이벤트 등록

이벤트 핸들러 어트리뷰트

<button onClick="greeting("Cathy")">Say Hi!</button>
function greeting(name) {
  console.log(`Hi, ${name}!`);
};

html 태그에 이벤트 속성을 부여하는 방법이다.

'on + 이벤트 종류'에 함수를 호출하면 이벤트 핸들러가 등록된다.

 

이벤트 핸들러 프로퍼티 

<button>Click me!</button>
const $button = document.querySelector('button');

$button.onclick = function () {
  console.log('button click');
};

한 타깃에 하나의 이벤트 핸들러만 바인딩할 수 있다.

 

addEventListener 메서드

<button>Click me!</button>
const $button = document.querySelector('button');

$button.addEventListener('click', function () {
  console.log('button click');
};

이벤트 핸들러를 인수로 전달한다. 

 

이벤트 전파

자바스크립트에서 이벤트가 발생하면 자동으로 이벤트 객체가 생성된다.

이 이벤트 객체는 event target을 중심으로 DOM 트리를 통해 전파된다. 

w3.org

console.log(e.eventPhase)를 실행하면 이벤트 단계를 숫자로 출력한다.

이벤트 단계는 세 가지가 있다.

  1. 캡쳐링 단계 capturing phase - 상위 요소에서 하위 요소 방향으로 전파
  2. 타깃 단계 target phase - 이벤트가 타깃으로 전달됨
  3. 버블링 단계 bubbling phase - 하위 요소에서 상위 요소 방향으로 전파

대부분의 이벤트는 캡쳐링과 버블링을 통해 전파되지만 그렇지 않은 이벤트도 있다. 

이벤트 객체의 bubbles 메소드로 그 여부를 쉽게 확인할 수 있다.

 

이벤트 전파 방지 - stopPropagation()

상위 DOM 요소로 이벤트가 전달되는 것을 막아주는 메소드이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      span {
        border: 1px solid green;
      }
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Click Me!!</span>
    </div>
    <script>
      document.querySelector("div").addEventListener("click", () => {
        console.log("div!");
      });

      document.querySelector("span").addEventListener("click", () => {
        console.log("span!");
      });
    </script>
  </body>
</html>

이렇게 코드를 짜놓고 span 영역을 클릭하면 콘솔에 'div!'와 'span!'이 모두 출력된다.

하위 요소에서 발생한 click 이벤트를 상위 요소인 div에서도 캐치하여 해당 이벤트 핸들러를 처리한 것이다.

 

document.querySelector("div").addEventListener("click", () => {
  console.log("div!");
});

document.querySelector("span").addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("span!");
});

이벤트가 상위 요소에 전파되지 않도록 하위 요소에 stopPropagation()을 추가하면 자신에게 바인딩된 이벤트만 처리한다.

 

DOM 요소 기본 동작 중지 - preventDefault()

모든 DOM 요소에는 기본 동작이 존재하는데 그 기본 동작을 막아주는 메소드이다.

나는 이 메소드를 폼 구현할 때 제출 버튼에서 가장 많이 썼었다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Simple Form</title>
  </head>
  <body>
    <form>
      <input name="name" placeholder="이름을 입력하세요" />
      <button type="submit">제출하기</button>
    </form>
  </body>
</html>

코드샌드박스에서 간단한 form 예제를 만들어보았다.

type이 submit인 버튼을 클릭하면 새로고침이 발생하면서 uri의 쿼리 파라미터에 입력값이 붙는다.

이 새로고침을 방지하려면 이벤트 객체의 preventDefault() 메소드를 사용해야 한다.

 

    <script>
      const form = document.querySelector("form");
      form.addEventListener("submit", (e) => {
        e.preventDefault();
      });
    </script>

preventDefault() 적용 후 더 이상 새로고침이 발생하지 않는다.

 

 

 

[개념잡기] e.preventDefault() 와 stopPropagation() 의 차이

stopPropogation vs preventDefault e.preventDefault()와 e.stopPropagation()의 차이 두개의 코드 모두 이벤트 관련 동작에서 많이 사용되는 코드이다. 둘의 차이점은 무엇일까 알아보자. e.preventDefault() html 에서 a

pa-pico.tistory.com

 

'Programming > JavaScript' 카테고리의 다른 글

<JavaScript> 정렬의 비교 함수는 어떻게 동작하는가  (0) 2023.07.25
<JavaScript> parseInt()와 Number()는 어떤 차이가 있을까?  (0) 2023.03.14
<JavaScript> 프로토타입 체인  (0) 2022.09.22
<JavaScript> 프로토타입  (0) 2022.09.21
<JavaScript> 객체 지향 프로그래밍  (0) 2022.09.21
'Programming/JavaScript' Related Articles more
Comments