이벤트 위임과 브라우저 기본 동작 제어

브라우저 기본 동작 취소하기

브라우저는 다음과 같은 상황에서 기본 동작을 자동으로 수행합니다

• 링크 클릭: <a> 태그를 클릭하면 지정된 URL로 이동합니다.
• 폼 제출: <form>의 제출 버튼을 클릭하면 폼 데이터가 서버로 전송됩니다.
• 텍스트 드래그: 마우스로 텍스트를 선택

이러한 동작을 커스터마이징하려면 기본 동작을 취소해야 합니다.

event.preventDefault()로 기본 동작 취소

자바스크립트 이벤트 핸들러에서 event.preventDefault() 메서드를 호출하면 브라우저의 기본 동작을 취소할 수 있습니다.

<!-- 기본 동작이 취소된 링크 예시 -->
<a href="https://example.com" id="myLink">Example 링크</a>

<script>
  document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault(); // 링크 이동을 막음
    console.log('링크 클릭됨: 기본 동작이 취소되었습니다.');
  });
</script>

인라인 핸들러에서 return false

인라인 이벤트 핸들러에서는 return false를 사용하면 기본 동작이 취소됩니다.

<!-- 인라인 이벤트 핸들러를 사용한 기본 동작 취소 -->
<a href="https://example.com" onclick="return false;">Example 링크</a>

이벤트 위임을 활용한 기본 동작 취소

각 메뉴에 개별 핸들러를 달지 않고, 상위 요소인 <ul>에 단 하나의 클릭 이벤트 핸들러를 등록 후 기본 동작 취소

<!-- HTML: 메뉴 예시 -->
<ul id="navMenu">
  <li><a href="/home">홈</a></li>
  <li><a href="/about">소개</a></li>
  <li><a href="/contact">연락처</a></li>
</ul>

// JavaScript: 이벤트 위임을 사용한 메뉴 처리
document.getElementById('navMenu').addEventListener('click', function(event) {
  // 이벤트가 발생한 실제 요소를 찾습니다.
  let link = event.target.closest('a');
  
  // 만약 클릭한 요소가 <a> 태그가 아니라면 아무런 작업도 하지 않습니다.
  if (!link) return;
  
  // 기본 동작 취소: 페이지 이동 방지
  event.preventDefault();
  
  // 예를 들어, 메뉴 항목에 따른 AJAX 요청이나 동적 UI 업데이트를 수행할 수 있습니다.
  console.log(`메뉴 항목 클릭됨: ${link.getAttribute('href')}`);
});

기본 동작과 이벤트 연쇄 효과

어떤 이벤트는 연쇄적으로 발생합니다. 예를 들어, <input> 필드에서 마우스 버튼을 누르면 mousedown 이벤트가 발생하고, 이로 인해 자동으로 focus 이벤트가 발생합니다. 만약 mousedown 이벤트의 기본 동작을 취소하면 해당 필드에 포커스가 가지 않아 focus 이벤트가 발생하지 않습니다.

<!-- 두 번째 인풋은 mousedown 기본 동작 취소로 인해 포커스가 발생하지 않음 -->
<input type="text" placeholder="포커스 정상" onfocus="this.style.border='2px solid green'">
<input type="text" placeholder="포커스 안됨" onmousedown="return false" onfocus="this.style.border='2px solid red'">

passive 이벤트 리스너

addEventListener를 사용할 때 passive: true 옵션을 설정하면, 해당 핸들러에서는 preventDefault()를 호출하지 않겠다는 것을 브라우저에 미리 알려서 스크롤 같은 작업을 부드럽게 만듭니다.

document.addEventListener('wheel', function(event) {
  console.log('휠 이벤트');
}, { passive: true });