JavaScript의 DOM 이벤트 이해: 상호 작용에 대한 종합 가이드

JavaScript의 DOM 이벤트

DOM 이벤트는 사용자 상호 작용, 리소스 로드 또는 상태 변경과 같이 브라우저에서 발생하는 작업 또는 발생입니다. 이벤트는 웹 개발의 필수적인 부분으로, 개발자가 웹 페이지를 대화형으로 만들 수 있도록 해줍니다.

---

1. DOM 이벤트란 무엇인가요?

DOM 이벤트는 JavaScript를 사용하여 감지할 수 있는 상호 작용이나 변경 사항을 나타냅니다. 이벤트의 예는 다음과 같습니다.

• 버튼 클릭(클릭)
• 입력 필드에 입력하기(input, keydown, keyup)
• 요소 위에 마우스를 올리면(마우스오버, 마우스아웃)
• 양식 제출(제출)
• 페이지 로드 완료(로드)

---

2. 이벤트 리스너

이벤트 리스너는 대상 요소에서 특정 이벤트가 발생할 때까지 기다리는 함수입니다.

이벤트 리스너 추가

이벤트 리스너를 요소에 연결하려면 addEventListener 메소드를 사용하세요.

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

이벤트 리스너 제거

removeEventListener 메소드를 사용하여 이벤트 리스너를 분리하세요.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. DOM 이벤트 유형

아. 마우스 이벤트

• click: 요소를 마우스로 클릭하면 실행됩니다.
• dblclick: 마우스를 두 번 클릭하면 실행됩니다.
• mouseover: 마우스가 요소에 들어갈 때 실행됩니다.
• mouseout: 마우스가 요소를 떠날 때 발생합니다.

베. 키보드 이벤트

• keydown: 키를 눌렀을 때 실행됩니다.
• keyup: 키를 놓을 때 실행됩니다.
• keypress: 더 이상 사용되지 않습니다. 대신 keydown을 사용하세요.

ㄷ. 양식 이벤트

• submit: 양식이 제출되면 실행됩니다.
• 변경: 입력 요소의 값이 변경되면 실행됩니다.

디. 윈도우 이벤트

• load: 페이지가 완전히 로드되면 실행됩니다.
• resize: 브라우저 창의 크기가 조정될 때 실행됩니다.
• 스크롤: 페이지가 스크롤될 때 실행됩니다.

E. 입력 이벤트

• 입력: 입력 필드의 값이 변경되면 실행됩니다.
• focus: 입력 요소가 포커스를 얻었을 때 실행됩니다.
• 흐림: 입력 요소가 초점을 잃을 때 실행됩니다.

---

4. 이벤트 객체

이벤트가 발생하면 JavaScript는 이벤트에 대한 세부정보가 포함된 이벤트 개체를 제공합니다.

이벤트 객체의 공통 속성

• 유형: 이벤트 유형(예: 클릭, 키다운)
• target: 이벤트를 발생시킨 요소입니다.
• currentTarget: 이벤트 핸들러가 연결된 요소입니다.
• PreventDefault(): 이벤트의 기본 동작을 방지합니다.
• stopPropagation(): 이벤트가 상위 요소로 전파되는 것을 중지합니다.

예

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

5. 이벤트 전파

이벤트 전파는 이벤트 핸들러가 실행되는 순서를 결정합니다.

아. 이벤트 버블링

이벤트는 대상 요소에서 시작하여 상위 요소까지 버블링됩니다.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

버튼을 클릭하면 두 핸들러가 모두 실행됩니다.

베. 이벤트 캡쳐

이벤트는 루트에서 시작하여 대상 요소로 이동합니다.

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
  event.preventDefault(); // Prevent default behavior
});

세 번째 매개변수를 true로 설정하면 캡처가 활성화됩니다.

전파 중지

추가 전파를 방지하려면 stopPropagation()을 사용하세요.

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

---

6. 행사위임

이벤트 위임은 이벤트 버블링을 활용하여 동적으로 추가된 요소에 대한 이벤트를 관리합니다.

예

element.addEventListener("click", handler, true);

---

7. 실제 사례

아. 가시성 전환

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

베. 양식 유효성 검사

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

ㄷ. 무한스크롤

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8. 요약

• DOM 이벤트를 통해 사용자와 웹페이지 간의 상호작용이 가능합니다.
• addEventListener를 사용하여 이벤트 핸들러를 연결하세요.
• 효과적인 이벤트 관리를 위해 이벤트 객체와 전파 방법을 이해하세요.
• 동적 요소로 작업할 때 더 나은 성능을 위해 이벤트 위임을 사용하세요.

DOM 이벤트를 마스터하면 대화형 기능이 뛰어나고 사용자 친화적인 웹 애플리케이션을 만들 수 있습니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript의 DOM 이벤트 이해: 상호 작용에 대한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!