event를 제어하자 (preventDefault, stopPropagation)

예전에 올린자료 중에 파일 드래그앤 드랍을 구현을 한 적이있다. file drag and drop 작성한 코드중에 보면 html에 파일을 드랍을 하였을 때, 파일이 다운로드 되는 것을 막기 위하여 event.preventDefault를 사용 한 것을 볼 수있다. preventDefault, stopPropagation이 무엇이고 어떨 때 사용하는지 확인 해보자.

PreventDefault

예전 예제에서 다루었듯이 preventDefault는 이벤트에 대한 기본 동작을 막을 수 있는 함수이다. 지난 예제에서는 파일을 드랍하였을 때, 파일이 다운로드 되는 것을 막기 위해서 쓴것처럼 말이다.

모든 이벤트의 기본동작은 사용자 에이전트(브라우저 등)에 따라 다르지만 좀 특이한 사례를 언급해보겠다.

다들 readonly 속성을 써본적이 있을 것이라 생각한다. 우리는 input에 들어가 있는 값이 사용자에 의해 변경 되지 않았으면 하는 경우에는 disabled, readonly 속성중에 고민을 할 수 있다. 그 두개가 의미하는 바는 다르지만 말이다. disabled의 경우 input 태그 모두에 적용이 가능 한 속성으로 별 고민 없이 사용 할 수 있지만, disabled로 설정 하는 경우 해당 태그가 모습이 회색빛으로 dim되는 것을 볼 수 있기에 기본 디자인을 유지 하고 싶은경우 readonly를 사용 하게 된다.

하지만 readonly의 경우 text, date, url 등 input type별로 이용이 가능 하다.

checkbox의 경우에는 사용이 불가능한 속성이다. 그래서 disabled를 사용 하지 않고 값의 변경을 막기 위해서는 preventDefault가 필요 하다.

<!DOCTYPE html>
<html>
  <head>
    <script>
      const eventGuard = function (event) {
        event.preventDefault();
      };
    </script>
  </head>
  <body>
    <input type="checkbox" checked="checked" onclick="eventGuard(event)" />
  </body>
</html>

간단하게 위처럼 하게 되면 checkbox를 readonly 인 것처럼 이용 할 수 있다. 해당 예제는 MDN 에도 preventDefault를 설명 할 때 나온 예제 이므로 사용 해도 된다.

stopPropagation

우리는 아래와 같은 형태의 DOM이 있다고 할 때, inner를 클릭하였을 때, inner의 이벤트 리스너만 작동을 하고 outer의 이벤트 리스너는 작동을 하는 것을 원하지 않는다. 이럴때 사용 할 수 있는것이 stopPropagation이다.

stopPropagation은 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지한다. 캡처링/버블링 단계라는 말을 처음 들어볼 수 있을텐데 이건 다음 번에 알아보도록 하고 현재 이벤트가 부모로 이벤트가 전파 되지 않는다 라고 생각하자.

<!DOCTYPE html>
<html>
  <head>
    <script>
      const eventStopper = function (event, callback) {
        event.stopPropagation();
        callback();
      };
    </script>
  </head>
  <body>
    <div
      onclick="console.log('click outter')"
      style="
        background: #234171;
        width: 400px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      outter
      <div
        onclick="eventStopper(event, () => {console.log('click inner')})"
        style="background: #345678; width: 100px; height: 100px;"
      >
        inner
      </div>
    </div>
  </body>
</html>

위의 코드로 간단하게 테스트가 가능 하다.

코드 땜장이

이 블로그 검색

event를 제어하자 (preventDefault, stopPropagation)

stopPropagation

태그

댓글

댓글 쓰기

이 블로그의 인기 게시물

아이콘 폰트 (icomoon 사용법)

javascript 압축 파일 다운로드

Chart js와 amchart 비교