JavaScript 이벤트 - event Object/Page Load

이벤트 객체란?

이벤트 객체는 이벤트 핸들러가 호출될 때 브라우저가 자동으로 생성하여 전달하는 객체입니다. 이 객체에는 이벤트와 관련된 다양한 정보와 기능이 포함되어 있으며, 사용자는 이를 통해 이벤트가 발생한 요소, 이벤트의 유형, 기본 동작 제어, 이벤트 전파 제어 등을 처리할 수 있습니다.

 

이벤트 객체의 주요 속성과 메서드

1. type

이벤트의 종류를 나타낸다.

console.log(event.type); // "click"

2. target

이벤트가 발생한 요소를 참조함으로써 실질적으로 이벤트가 발생한 요소를 의미하며 이벤트 발생 시 변경을 적용할 요소를 결정하는데 유용하다. 예를들어, 여러 요소에 이벤트를 걸어줄 때 어떤 요소에서 이벤트가 발생했는지 알 수 있다.

function bgChange(event) {
  const randomColor = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  event.target.style.backgroundColor = randomColor;
}

3. currentTarget

이벤트리스너가 실제로 첨부된 요소를 참조한다. 어떤 요소에 이벤트리스너가 걸려있는지 파악가능

container.addEventListener('click', function(event) {
  console.log('target: ', event.target);
  console.log('currentTarget: ', event.currentTarget);
});

4. preventDefault()

브라우저가 해당 이벤트에 대해 기본동작을 취소한다.

주로 폼 제출시 유효성 검사를 통과하지 못할 때 사용한다.

form.onsubmit = function(e) {
  if (fname.value === '' || femail.value === '') {
    e.preventDefault(); // 제출 막기
    p.textContent = '이름과 이메일을 모두 입력해주세요.';
  }
}

5. stopPropagation()

이벤트가 상위 요소로 전파되는 것을 막아 이벤트 버블링을 막을 때 사용합니다.

childButton.addEventListener('click', (e) => {
  console.log('자식 요소 클릭');
  e.stopPropagation(); // 부모로 이벤트 전파 중단
});

 

DOMContentLoaded 이벤트

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 트리가 완성되었습니다.');
});

 

• 언제 발생?
  → HTML 문서가 완전히 파싱되고 DOM 트리가 완성되었을 때 발생합니다.
• 중요한 특징
  • 이미지, CSS, 외부 JS 파일 등 리소스의 로딩은 완료되지 않아도 됨
  • 빠른 시점에 JS 기능을 적용할 수 있어 실행 속도가 빠름
  • HTML 웹 문서의 구조를 인식한 후 JS 기능이 동작되도록 설정함으로서 안정성을 보장할 수 있다.

 

 

 

load 이벤트

window.addEventListener('load', function() {
  console.log('페이지의 모든 콘텐츠가 로드되었습니다.');
});

• 언제 발생?
  → HTML뿐만 아니라 이미지, CSS, 외부 JS 등 모든 리소스가 로드 완료된 후 발생합니다.
• 특징
  • 페이지 전체가 완성된 후 실행됨
  • 리소스 의존성이 있는 작업이나 애니메이션 효과 등에 적합