[JS] JavaScript 이벤트 기본 동작 완벽 정리 (preventDefault 사용법 포함)

[JS] 이벤트 캡처링 vs 버블링 | JavaScript 이벤트 전파 개념 정리

[JS] 이벤트 캡처링 vs 버블링 | JavaScript 이벤트 전파 개념 정리

1. Event (이벤트 기본 동작)

1. prevent browser action (브라우저 기본 동작 중단)

• 이벤트 객체의 preventDefault 메서드는 DOM 요소의 기본 동작을 중단시킨다.
  • 예를 들어 a 요소를 클릭하면 href 어트리뷰트에 지정 된 링크로 이동하고, checkbox 또는 radio 요소를 클릭하면 체크 또는 해제되는 것 등을 기본 동작이라고 한다.

<a href="https://www.google.com">
		클릭해도 절대 이동할 수 없는 a태그
</a>
<input type="checkbox">클릭해도 절대 체크되지 않는 체크박스

document.querySelector('a').addEventListener('click', e => {
    e.preventDefault();
});

document.querySelector('input[type=checkbox]').addEventListener('click', e => {
    e.preventDefault();
});

 

• 라디오 버튼 예제

<form>
  <label>민초파 답정너: 아이스크림 무슨 맛 먹을래?</label><br />

  <input type="radio" id="option1" name="options" value="1" />
  <label for="option1">엄마는 외계인</label><br />

  <input type="radio" id="option2" name="options" value="2" checked />
  <label for="option2">민트초코</label><br />

  <input type="radio" id="option3" name="options" value="3" />
  <label for="option3">아몬드 봉봉</label>
</form>

// name 속성으로 직접 이벤트 리스너를 등록하는 것이 불가능하므로
// 각 버튼들의 부모 요소인 form에 이벤트 리스너 추가.
document.querySelector("form").addEventListener("click", (e) => {
  // 클릭된 요소(이벤트 타겟)가 라디오 버튼인지 확인.
  if (e.target.type === "radio") {
    e.preventDefault();
  }
});

 

2. stop event propagation (이벤트 전파 방지)

• 이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지 시킨다.

<ul id="drink">
  <li>커피</li>
  <li>콜라</li>
  <li>우유</li>
</ul>

const $drink = document.getElementById('drink');

// 이벤트 위임 - 클릭 된 하위 li 요소의 color 변경
$drink.addEventListener('click', e => {
    if (e.target.matches('li')) {
        e.target.style.color = 'red';
    }
});

// 첫번째 li를 대상으로 color 변경
document.querySelector('li').addEventListener('click', e => {
    e.stopPropagation();  // 이벤트 전파 중단으로 red로 변경되지 않음
    e.target.style.color = 'blue';
});