상당수 이벤트는 발생 즉시 브라우저에 의해 특정 동작을 자동으로 수행하도록 되어있다.
- 링크를 클릭하면 해당 URL로 이동
- 폼전송버튼을 클릭하면 서버에 폼이 전송
- 마우스버튼을 누른 채로 글자위에서 커서를 움직이면 글자가 선택
그런데 어떨 때는 이러한 정해진 브라우저 기본동작 대신에 자바스크립트를 사용해 직접 동작을 구현해야 하는 경우가 생긴다.
먼저 브라우저의 정해진 기본동작을 취소해야 한다.
- event.preventDefault()
- on< event >프로퍼티로 핸들러가 할당되었다면 false를 반환하게 해 기본동작을 취소할 수 있다.
<a href="/" onclick="return false">이곳</a>
이나
<a href="/" onclick="event.preventDefault()">이곳을</a> 클릭해주세요.<ul id="menu" class="menu">
<li><a href="/html">HTML</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/css">CSS</a></li>
</ul>menu.onclick = function(event) {
if (event.target.nodeName != 'A') return;
let href = event.target.getAttribute('href');
alert( href ); // 서버에서 데이터를 읽어오거나, UI를 새로 만든다거나 하는 등의 작업이 여기에 들어갑니다.
return false; // 브라우저 동작을 취소합니다(URL로 넘어가지 않음).
};이벤트위임으로 menu에 이벤트를 할당하고 return false;로 기본동작을 취소한다.
addEventListener의 ‘passive’ 옵션
addEventListener의 passive: true옵션은 브라우저에게 preventDefault()를 호출하지 않겠다고 알리는 역할을 한다.
모바일기기에는 스크린에 손가락을 대고 움직일 때 발생하는 touchmove와 같은 이벤트가 있다. 이런 이벤트는 기본적으로 스크롤링(scrolling)을 발생시킨다. 그런데 핸들러의 preventDefault()를 사용하면 스크롤링을 막을 수 있다.
브라우저는 스크롤링을 발생시키는 이벤트를 감지했을 때 먼저 모든 핸들러를 처리하는데, 이때 preventDefault가 어디에서도 호출되지 않았다고 판단되면, 그제야 스크롤링을 진행한다. 이 과정에서 불필요한 지연이 생기고, 화면이 ‘덜덜 떨리는’ 현상이 발생한다.
passive: true옵션은 핸들러가 스크롤링을 취소하지 않을 것이라는 정보를 브라우저에게 알려주는 역할을 한다. 이 정보를 바탕으로 브라우저는 화면을 최대한 자연스럽게 스크롤링 할 수 있게 하고 이벤트는 적절하게 처리된다.
