브라우저 기본 동작
상당수 이벤트는 발생 즉시 브라우저에 의해 특정 동작을 자동으로 수행한다.
브라우저 기본 동작 막기
브라우저 기본 동작을 취소할 수 있는 방법은 두 가지가 있다.
-
첫 번째 방법은
event객체를 사용하는 것이다. 이때event객체에 구현된event.preventDefault()메서드를 사용한다. -
핸들러가
addEventListener가 아닌on<event>를 사용해 할당되었다면false를 반환하게 해 기본 동작을 막을 수도 있다.
<a href="/" onclick="return false">이곳</a>
이나
<a href="/" onclick="event.preventDefault()">이곳을</a> 클릭해주세요.addEventListener의 'passive' 옵션
addEventListener의 passive: true 옵션은 브라우저에게 preventDefault()를 호출하지 않겠다고 알리는 역할을 한다.
모바일 기기에는 사용자가 스크린에 손가락을 대고 움직일 때 발생하는 touchmove와 같은 이벤트가 있다. 이런 이벤트는 기본적으로 스크롤링을 발생시킨다. 그런데 핸들러의 preventDefault()를 사용하면 스크롤링을 막을 수 있다.
브라우저는 스크롤링을 발생시키는 이벤트를 감지했을 때 먼저 모든 핸들러를 처리하는데, 이때 preventDefault가 어디에서도 호출되지 않았다고 판단되면, 그제야 스크롤링을 진행한다. 이 과정에서 불필요한 지연이 생기고, 화면이 떨리는 현상이 발생한다.
passive: true 옵션은 핸들러가 스크롤링을 취소하지 않을 것이라는 정보를 브라우저에게 알려주는 역할을 한다. 이 정보를 바탕으로 브라우저는 화면을 최대한 자연스럽게 스크롤링 할 수 있게 하고 이벤트는 적절하게 처리된다.
요약
event.preventDefault()나 return false를 사용하면 이벤트를 막을 수 있다. return false를 사용하는 방법은 on<event>를 통해 할당한 핸들러에서만 동작한다.
addEventListener의 passive: true 옵션은 브라우저에게 기본동작을 막지 않을 것이라는 정보를 전달한다. 이 옵션은 모바일에서 발생하는 touchstart와 touchmove를 다룰 때 유용하다. 브라우저는 모든 핸들러를 처리하지 않아도 스크롤링을 시작할 수 있기 때문이다.
기본동작을 막은 경우, event.defaultPrevented 값은 true이고, 그렇지 않은 경우는 false이다.
