DOM 이벤트는 웹페이지를 대화형으로 만드는 요소입니다. DOM 이벤트를 사용하면 페이지를 클릭하거나 양식을 제출할 수 있으며 이를 통해 개발자는 매력적인 사용자 경험을 만들 수 있습니다.

DOM 이벤트의 몇 가지 예로는 사용자가 마우스를 클릭할 때, 웹페이지가 로드될 때, 이미지가 로드될 때, HTML 양식이 제출될 때, 사용자가 키를 누를 때 등이 있습니다.

이 문서에서는 DOM 이벤트의 주요 개념을 단순화하고 이를 처리하는 방법을 살펴보겠습니다.

1. 이벤트 리스너 추가

addEventListener는 이벤트 핸들러를 요소에 연결하며 페이지에 대한 사용자 상호 작용에 요소가 반응하는 방식을 정의할 수 있습니다.

예: 아래 코드는 이미지를 클릭할 때 칵테일 세부정보를 표시하는 '클릭' 이벤트를 추가합니다.

`img.addEventListener('click', () => handleClick(cocktail));`

2. 쿼리선택기

querySelector를 사용하면 CSS와 유사한 선택기를 사용하여 요소를 선택할 수 있습니다. 이는 요소를 타겟팅하는 가장 다양한 방법 중 하나입니다.

예: 이 코드는 웹페이지에 축소 가능한 섹션을 생성합니다. document.querySelectorAll은 웹페이지의 모든 h3 요소를 선택하고 일치하는 모든 요소의 NodeList를 반환합니다.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById 및 getElementsByClassName

getElementById는 고유 ID로 단일 요소를 타겟팅합니다.

마찬가지로 getElementsByClassName은 특정 클래스가 있는 모든 요소를 ​​선택하고 컬렉션으로 반환합니다.

예: 아래에서 getElementById는 HTML 문서의 id 속성으로 요소를 찾습니다.

여기에서는 특정 양식 입력, 새 이름, 새 성분, 새 이미지, 새 레시피에 액세스하고 해당 값을 검색하는 데 사용됩니다.

이러한 값은 const로 정의된 newCocktail 객체의 속성에 저장됩니다.

이렇게 하면 사용자가 새로운 칵테일을 만들기 위해 양식을 제출할 때 해당 양식이 newCocktail 객체 내부에 구조화된 방식으로 저장됩니다.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

DOMContentLoaded 이벤트는 DOM이 완전히 로드된 후에만 JavaScript가 실행되도록 보장하여 요소가 사용 가능해지기 전에 요소에 액세스하려고 시도하는 오류를 방지합니다.

예: DOMContentLoaded는 스타일시트, 이미지 또는 기타 외부 리소스가 완전히 로드될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석될 때 실행되는 이벤트입니다.

DOM이 완벽하게 구축되고 액세스 가능하도록 보장하므로 이벤트 리스너 추가 또는 DOM 조작 등 HTML의 요소와 안전하게 상호 작용할 수 있습니다.

아래 코드에서 브라우저는 이제 문서를 사용할 수 있으며 사용자가 문서와 상호 작용을 시작할 수 있음을 알려줍니다.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

최종 메모

DOM 이벤트는 웹페이지를 대화형으로 만들고 사용자의 참여를 유도하는 데 있어 기본입니다. addEventListener, querySelector, getElementById 및 getElementsByClassName과 같은 핵심 메소드를 이해하고 활용함으로써 클릭, 양식 제출 등에 응답하는 동적 사용자 인터페이스를 생성할 수 있습니다.

또한 DOMContentLoaded 이벤트는 DOM이 완전히 로드된 후에만 스크립트가 실행되도록 보장하여 잠재적인 오류를 방지하고 원활한 사용자 상호 작용을 보장합니다.

요약하면 DOM 이벤트를 통해 다음을 수행할 수 있습니다.

• 반응형 상호작용을 위해 addEventListener를 사용하여 이벤트 핸들러를 연결합니다.

• querySelector 또는 getElementById를 사용하여 요소를 선택하여 콘텐츠를 동적으로 업데이트하세요.

• 양식 제출과 같은 사용자 입력을 기반으로 이벤트에 의해 트리거되는 작업을 관리합니다.

• DOMContentLoaded를 사용하여 스크립트가 적시에 실행되도록 하세요.

이러한 기술을 사용하면 정적 웹 페이지를 사용자 참여를 향상시키는 대화형 환경으로 변환할 수 있습니다.